--- /dev/null
+html, button, input, select, textarea,
+.pure-g [class *= "pure-u"] {
+ font-family: "proxima-nova", sans-serif;
+}
+
+
+/* --------------------------
+ * Element Styles
+ * --------------------------
+*/
+
+body {
+ min-width: 320px;
+ color: #777;
+ line-height: 1.6;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-weight: bold;
+ color: rgb(75, 75, 75);
+}
+h3 {
+ font-size: 1.25em;
+}
+h4 {
+ font-size: 1.125em;
+}
+
+a {
+ color: #3b8bba; /* block-background-text-normal */
+ text-decoration: none;
+}
+
+a:visited {
+ color: #265778; /* block-normal-text-normal */
+}
+
+dt {
+ font-weight: bold;
+}
+dd {
+ margin: 0 0 10px 0;
+}
+
+aside {
+ background: #1f8dd6; /* same color as selected state on site menu */
+ padding: 0.3em 1em;
+ border-radius: 3px;
+ color: #fff;
+}
+
+aside a, aside a:visited {
+ color: rgb(169, 226, 255);
+}
+
+.fa {
+ float: right;
+ padding: 0.5em;
+}
+
+.home-menu {
+ background-color: #323b44 !important;
+ vertical-align: middle;
+}
+
+/* --------------------------
+ * Layout Styles
+ * --------------------------
+*/
+
+/* Navigation Push Styles */
+#layout {
+ position: relative;
+ padding-left: 0;
+ top: 20px;
+}
+ #layout.active {
+ position: relative;
+ left: 180px;
+ }
+ #layout.active #menu {
+ left: 180px;
+ width: 180px;
+ }
+
+#layout #main {
+ padding: 1em 1em 1em 1em;
+}
+/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */
+.l-box {
+ padding: 1em;
+}
+
+.l-wrap {
+ margin-left: auto;
+ margin-right: auto;
+}
+.content .l-wrap {
+ margin-left: -1em;
+ margin-right: -1em;
+}
+
+
+/* --------------------------
+ * Header Module Styles
+ * --------------------------
+*/
+
+.header {
+ font-family: "omnes-pro", sans-serif;
+ max-width: 768px;
+ margin: 0 auto;
+ padding: 1em;
+ text-align: center;
+ border-bottom: 1px solid #eee;
+ }
+ .header h1 {
+ font-size: 300%;
+ font-weight: 100;
+ margin: 0;
+ }
+ .header h2 {
+ font-size: 125%;
+ font-weight: 100;
+ line-height: 1.5;
+ margin: 0;
+ color: #666;
+ }
+
+
+ /* --------------------------
+ * Content Module Styles
+ * --------------------------
+ */
+
+/* The content div is placed as a wrapper around all the docs */
+.content {
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 1em;
+ padding-right: 1em;
+ max-width: 768px;
+}
+
+ .content .content-subhead {
+ margin: 2em 0 1em 0;
+ font-weight: 300;
+ color: #888;
+ position: relative;
+ }
+
+ .content .content-spaced {
+ line-height: 1.8;
+ }
+
+ .content .content-quote {
+ font-family: "Georgia", serif;
+ color: #666;
+ font-style: italic;
+ line-height: 1.8;
+ border-left: 5px solid #ddd;
+ padding-left: 1.5em;
+ }
+
+ .content-link {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: block;
+ height: 100%;
+ width: 20px;
+ background: transparent url('/img/link-icon.png') no-repeat center center;
+ background-size: 20px 20px;
+ }
+
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+ .content-link {
+ background-image: url('/img/link-icon@2x.png');
+ }
+ }
+
+
+/* --------------------------
+ * Code Styles
+ * --------------------------
+*/
+
+pre,
+code {
+ font-family: Consolas, 'Liberation Mono', Courier, monospace;
+ color: #333;
+ background: rgb(250, 250, 250);
+}
+
+code {
+ padding: 0.2em 0.4em;
+ white-space: nowrap;
+}
+.content p code {
+ font-size: 90%;
+}
+
+.code {
+ margin-left: -1em;
+ margin-right: -1em;
+ padding: 1em;
+ border: 1px solid #eee;
+ border-left-width: 0;
+ border-right-width: 0;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+}
+.code code {
+ font-size: 95%;
+ white-space: pre;
+ word-wrap: normal;
+ padding: 0;
+ background: none;
+}
+.code-wrap code {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+/* --------------------------
+ * Footer Module Styles
+ * --------------------------
+*/
+
+.footer {
+ font-size: 87.5%;
+ border-top: 1px solid #eee;
+ margin-top: 3.4286em;
+ padding: 1.1429em;
+ background: rgb(250, 250, 250);
+}
+
+.legal {
+ line-height: 1.6;
+ text-align: center;
+ margin: 0 auto;
+}
+
+ .legal-license {
+ margin-top: 0;
+ }
+ .legal-links {
+ list-style: none;
+ padding: 0;
+ margin-bottom: 0;
+ }
+ .legal-copyright {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+
+/* --------------------------
+ * Main Navigation Bar Styles
+ * --------------------------
+*/
+
+/* Add transition to containers so they can push in and out */
+#layout,
+#menu,
+.menu-link {
+ -webkit-transition: all 0.2s ease-out;
+ -moz-transition: all 0.2s ease-out;
+ -ms-transition: all 0.2s ease-out;
+ -o-transition: all 0.2s ease-out;
+ transition: all 0.2s ease-out;
+}
+
+#layout.active .menu-link {
+ left: 180px;
+}
+
+#menu {
+ margin-left: -180px; /* "#menu" width */
+ width: 180px;
+ position: fixed;
+ top: 48px;
+ left: 0;
+ bottom: 0;
+ z-index: 1000; /* so the menu or its navicon stays above all content */
+ background: #191818;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+ #menu a {
+ color: #999;
+ border: none;
+ white-space: normal;
+ padding: 0.625em 1em;
+ }
+
+ #menu .pure-menu-open {
+ background: transparent;
+ border: 0;
+ }
+
+ #menu .pure-menu ul {
+ border: none;
+ background: transparent;
+ }
+
+ #menu .pure-menu ul,
+ #menu .pure-menu .menu-item-divided {
+ border-top: 1px solid #333;
+ }
+
+ #menu .pure-menu li a:hover,
+ #menu .pure-menu li a:focus {
+ background: #333;
+ }
+
+ .menu-link {
+ position: fixed;
+ display: block; /* show this only on small screens */
+ top: 0;
+ left: 0; /* "#menu width" */
+ background: #000;
+ background: rgba(0,0,0,0.7);
+ font-size: 11px; /* change this value to increase/decrease button size */
+ z-index: 10;
+ width: 4em;
+ height: 4em;
+ padding: 1em;
+ }
+
+ .menu-link:hover,
+ .menu-link:focus {
+ background: #000;
+ }
+
+ .menu-link span {
+ position: relative;
+ display: block;
+ margin-top: 0.9em;
+ }
+
+ .menu-link span,
+ .menu-link span:before,
+ .menu-link span:after {
+ background-color: #fff;
+ width: 100%;
+ height: .2em;
+ -webkit-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ -ms-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ transition: all 0.4s;
+ }
+
+ .menu-link span:before,
+ .menu-link span:after {
+ position: absolute;
+ top: -.55em;
+ content: " ";
+ }
+
+ .menu-link span:after {
+ top: .55em;
+ }
+
+ .menu-link.active span {
+ background: transparent;
+ }
+
+ .menu-link.active span:before {
+ -webkit-transform: rotate(45deg) translate(.5em, .4em);
+ -moz-transform: rotate(45deg) translate(.5em, .4em);
+ -ms-transform: rotate(45deg) translate(.5em, .4em);
+ -o-transform: rotate(45deg) translate(.5em, .4em);
+ transform: rotate(45deg) translate(.5em, .4em);
+ }
+
+ .menu-link.active span:after {
+ -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
+ -moz-transform: rotate(-45deg) translate(.4em, -.3em);
+ -ms-transform: rotate(-45deg) translate(.4em, -.3em);
+ -o-transform: rotate(-45deg) translate(.4em, -.3em);
+ transform: rotate(-45deg) translate(.4em, -.3em);
+ }
+
+ #menu .pure-menu-heading {
+ font-size: 125%;
+ font-weight: 300;
+ letter-spacing: 0.1em;
+ color: #fff;
+ margin-top: 0;
+ padding: 0.5em 0.8em;
+ }
+ #menu .pure-menu-heading:hover,
+ #menu .pure-menu-heading:focus {
+ color: #999;
+ }
+
+ #menu .pure-menu-selected {
+ background: #1f8dd6;
+ }
+
+ #menu .pure-menu-selected a {
+ color: #fff;
+ }
+
+ #menu li.pure-menu-selected a:hover,
+ #menu li.pure-menu-selected a:focus {
+ background: none;
+ }
+
+
+
+/* ---------------------
+ * Smaller Module Styles
+ * ---------------------
+*/
+
+.pure-img-responsive {
+ max-width: 100%;
+ height: auto;
+}
+
+.pure-paginator .pure-button {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+.pure-button {
+ font-family: inherit;
+}
+a.pure-button-primary {
+ color: white;
+}
+
+
+/* green call to action button class */
+.notice {
+ background-color: #61B842;
+ color: white;
+}
+
+.muted {
+ color: #ccc;
+}
+
+
+
+/* -------------
+ * Table Styles
+ * -------------
+*/
+
+.pure-table th,
+.pure-table td {
+ padding: 0.5em 1em;
+ font-size: 90%;
+}
+
+.table-responsive {
+ margin-left: -1em;
+ margin-right: -1em;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ margin-bottom: 1em;
+}
+.table-responsive table {
+ width: 100%;
+ min-width: 35.5em;
+ border-left-width: 0;
+ border-right-width: 0;
+}
+
+.table-responsive .mq-table {
+ width: 100%;
+ min-width: 44em;
+}
+.mq-table th.highlight {
+ background-color: rgb(255, 234, 133);
+}
+.mq-table td.highlight {
+ background-color: rgb(255, 250, 229);
+}
+.mq-table th.highlight code,
+.mq-table td.highlight code {
+ background: rgb(255, 255, 243);
+}
+.mq-table-mq code {
+ font-size: 0.875em;
+}
+
+/* ----------------------------
+ * Example for full-width Grids
+ * ----------------------------
+*/
+
+.grids-example {
+ background: rgb(250, 250, 250);
+ margin: 2em auto;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+}
+
+/* --------------------------
+ * State Rules
+ * --------------------------
+*/
+
+
+.is-code-full {
+ text-align: center;
+}
+.is-code-full .code {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+
+/* --------------------------
+ * Responsive Styles
+ * --------------------------
+*/
+
+@media screen and (min-width: 35.5em) {
+
+ .legal-license {
+ text-align: left;
+ margin: 0;
+ }
+ .legal-copyright,
+ .legal-links,
+ .legal-links li {
+ text-align: right;
+ margin: 0;
+ }
+
+}
+
+@media screen and (min-width: 48em) {
+
+ .l-wrap,
+ .l-wrap .content {
+ padding-left: 1em;
+ padding-right: 1em;
+ }
+ .content .l-wrap {
+ margin-left: -2em;
+ margin-right: -2em;
+ }
+
+ .header,
+ .content {
+ padding-left: 2em;
+ padding-right: 2em;
+ }
+
+ .header h1 {
+ font-size: 350%;
+ }
+ .header h2 {
+ font-size: 150%;
+ }
+
+ .content p {
+ font-size: 1.125em;
+ }
+
+ .code {
+ margin-left: auto;
+ margin-right: auto;
+ border-left-width: 1px;
+ border-right-width: 1px;
+ }
+
+ .table-responsive {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .table-responsive table {
+ border-left-width: 1px;
+ border-right-width: 1px;
+ }
+
+}
+
+@media (min-width: 58em) {
+
+ #layout {
+ padding-left: 180px; /* left col width "#menu" */
+ left: 0;
+ }
+ #menu {
+ left: 180px;
+ }
+ .menu-link {
+ position: fixed;
+ left: 180px;
+ display: none;
+ }
+ #layout.active .menu-link {
+ left: 180px;
+ }
+
+}
+
+.hero {
+ text-align: center;
+}
+ .hero-titles {
+ font-family: "omnes-pro", sans-serif;
+ padding: 0 1em;
+ margin: 2em auto;
+ max-width: 768px;
+ }
+ .hero-site {
+ font-size: 400%;
+ font-weight: 100;
+ margin: 0;
+ color: #1f8dd6;
+ }
+ .hero-tagline {
+ font-size: 150%;
+ font-weight: 100;
+ line-height: 1.5;
+ margin: 0 0 1em;
+ color: #666;
+ }
+
+a.button-cta,
+a.button-secondary {
+ margin: 0.25em;
+}
+
+a.button-cta {
+ background: #1f8dd6;
+ color: #fff;
+ border: 1px solid #1f8dd6;
+}
+
+a.button-secondary {
+ background: #fff;
+ color: #666;
+ border: 1px solid #ddd;
+}
+
+.size-chart {
+ width: 100%;
+ font-size: 87.5%;
+ line-height: 1.4;
+ margin-bottom: 2em;
+}
+
+ a.size-chart-item {
+ display: block;
+ color: #fff;
+ padding: 1.45em 0;
+ text-align: center;
+ text-decoration: none;
+ text-transform: capitalize;
+ }
+
+ .size-chart-label {
+ display: inline-block;
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ }
+ .size-chart-size {
+ display: none;
+ }
+
+ .size-chart-base {
+ background: #0e90d2;
+ }
+ .size-chart-base .size-chart-size {
+ color: rgb(103, 194, 240);
+ }
+
+ .size-chart-grids {
+ background: rgb(128, 88, 165);
+ }
+ .size-chart-grids .size-chart-size {
+ color: rgb(200, 131, 255);
+ }
+
+ .size-chart-forms {
+ background: #5eb95e;
+ }
+
+ .size-chart-forms .size-chart-size {
+ color: rgb(161, 240, 137);
+ }
+
+ .size-chart-buttons {
+ background: #dd514c;
+ }
+
+ .size-chart-buttons .size-chart-size {
+ color: rgb(236, 164, 154);
+ }
+
+ .size-chart-menus {
+ background: rgb(250, 210, 50);
+ }
+ .size-chart-menus .size-chart-size {
+ color: rgb(255, 240, 134);
+ }
+
+ .size-chart-tables {
+ background: rgb(243, 123, 29);
+ }
+ .size-chart-tables .size-chart-label {
+ margin-left: -0.5em;
+ }
+ .size-chart-tables .size-chart-size {
+ color: rgb(255, 190, 129);
+ }
+
+.marketing {
+ border-bottom: 1px solid #eee;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-bottom: 2em;
+}
+.marketing-customize {
+ margin-bottom: 0;
+ border-bottom: 0;
+ padding-bottom: 0;
+}
+
+ .marketing .content {
+ margin-bottom: 0;
+ }
+
+ .marketing-header {
+ font-weight: 400;
+ }
+
+ .marketing-diagram {
+ margin: 2em auto;
+ }
+
+.sample-buttons {
+ margin: 1em auto;
+ padding: 0 0.5em;
+}
+
+ .sample-button {
+ padding: 0.5em;
+ text-align: center;
+ }
+ .sample-button .pure-button {
+ width: 100%;
+ }
+
+ .button-a {
+ background: #e1f2fa;
+ color: #5992aa;
+ }
+
+ .button-b {
+ background: #fcebbd;
+ color: #af9540;
+ }
+
+ .button-c,
+ .button-d,
+ .button-e {
+ border-radius: 8px;
+ }
+
+ .button-f,
+ .button-g,
+ .button-h {
+ border-radius: 20px;
+ }
+
+ .button-c {
+ background: #333;
+ color: #fff;
+ }
+ .button-d {
+ background: #d3eda3;
+ color: #72962e;
+ }
+
+ .button-e {
+ background: #f5ab9e;
+ color: #8c3a2b;
+ }
+ .button-f {
+ background: #ddaeff;
+ color: #8156a7;
+ }
+
+ .button-g {
+ background: #f57b00;
+ color: #ffca95;
+ }
+
+ .button-h {
+ background: #008ed4;
+ color: #fff;
+ }
+ .sample-button .button-h {
+ width: 50%; /* Updated to 80% at sm breakpoint */
+ }
+
+@media screen and (min-width: 30em) {
+ .size-chart-tables .size-chart-label {
+ margin-left: 0;
+ }
+}
+
+@media screen and (min-width: 35.5em) {
+ .hero {
+ margin-bottom: 3em;
+ }
+
+ .sample-button .button-h {
+ width: 100%;
+ }
+}
+
+@media screen and (min-width: 48em) {
+ .hero-titles {
+ padding: 0 2em;
+ }
+ .hero-site {
+ font-size: 800%;
+ }
+ .hero-tagline {
+ font-size: 250%;
+ }
+
+ a.button-cta,
+ a.button-secondary {
+ font-size: 125%;
+ }
+
+ .size-chart {
+ font-size: 100%;
+ }
+ a.size-chart-item {
+ padding: 0.5em;
+ text-align: left;
+ }
+ .size-chart-label {
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ -o-transform: none;
+ }
+ .size-chart-size {
+ display: block;
+ }
+
+ .marketing-header {
+ font-size: 150%;
+ }
+
+ .l-wrap .sample-buttons {
+ padding: 0 0.5em;
+ }
+}
+
+/**
+ * Baby Blue theme for RainbowJS
+ *
+ * @author tilomitra
+ */
+
+pre .comment {
+ color: #999;
+}
+
+pre .tag,
+pre .tag-name,
+pre .support.tag-name {
+ color: rgb(85, 85, 85);
+}
+
+pre .keyword,
+pre .css-property,
+pre .vendor-prefix,
+pre .sass,
+pre .class,
+pre .id,
+pre .css-value,
+pre .entity.function,
+pre .storage.function {
+ font-weight: bold;
+}
+
+pre .css-property,
+pre .css-value,
+pre .vendor-prefix,
+pre .support.namespace {
+ color: #333;
+}
+
+pre .constant.numeric,
+pre .keyword.unit,
+pre .hex-color {
+ font-weight: normal;
+ color: #099;
+}
+
+pre .attribute,
+pre .variable,
+pre .support {
+ color: #757575; /* skinbuilder block-page-text-normal with #1f8dd6 as primary */
+}
+
+pre .string,
+pre .support.value {
+ font-weight: normal;
+ color: #3b8bba; /* skinbuilder block-mine-text-low with #1f8dd6 as primary */
+}
+
+/* --------------------------
+ * Tabbed look in statistics
+ * --------------------------
+*/
+
+/* Set the size and font of the tab widget
+.tabGroup {
+ font: 10pt arial, verdana;
+ width: 800px;
+ height: 400px;
+}
+
+/* Configure the radio buttons to hide off screen */
+.tabGroup > input[type="radio"] {
+ position: absolute;
+ left:-100px;
+ top:-100px;
+}
+
+/* Configure labels to look like tabs */
+.tabGroup > input[type="radio"] + label {
+ /* inline-block such that the label can be given dimensions */
+ display: inline-block;
+
+ border: 1px solid silver;
+
+ /* the bottom border is handled by the tab content div */
+ border-bottom: 0;
+
+ /* Padding around tab text */
+ padding: 5px 10px;
+
+ /* Set the background color to default gray (non-selected tab) */
+ background-color:#ddd;
+}
+
+/* Focused tabs need to be highlighted as such */
+.tabGroup > input[type="radio"]:focus + label {
+ border:1px dashed silver;
+}
+
+/* Checked tabs must be white with the bottom border removed */
+.tabGroup > input[type="radio"]:checked + label {
+ background-color:white;
+ font-weight: bold;
+ border-bottom: 1px solid white;
+ margin-bottom: -1px;
+}
+
+/* The tab content must fill the widgets size and have a nice border */
+.tabGroup > div {
+ display: none;
+ background-color: white;
+ border: 1px solid silver;
+ padding: 10px 10px;
+ height: 100%;
+ overflow: auto;
+}
+
+/* This matchs tabs displaying to their associated radio inputs */
+.port-stats:checked ~ .port-stats, .flow-stats:checked ~ .flow-stats {
+ display: block;
+}
projects / VSoRC / .git / blobdiff