oboe.js-demo/statics/css/all.css

A website for Oboe.js

/* categorical colours from https://github.com/mbostock/d3/wiki/Ordinal-Scales */
@font-face {
  font-family: "Computer Modern mono";
  src: url("/type/cmuntt.eot");
  src: url("/type/cmuntt.ttf");
  src: url("/type/cmuntt.svg");
  src: url("/type/cmuntt.woff"); }

@font-face {
  font-family: "Computer Modern";
  src: url("/type/cmunrm.eot");
  src: url("/type/cmunrm.ttf");
  src: url("/type/cmunrm.svg");
  src: url("/type/cmunrm.woff"); }

@font-face {
  font-family: "Computer Modern italic";
  src: url("/type/cmunti.eot");
  src: url("/type/cmunti.ttf");
  src: url("/type/cmunti.svg");
  src: url("/type/cmunti.woff"); }

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, font, 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, figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal; }

html {
  line-height: 1;
  background-color: #0f0a07; }

body {
  color: #0f0a07; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  background: #fefefc;
  color: #0f0a07;
  font-family: "Computer Modern", georgia, serif;
  font-size: 120%; }

em {
  font-family: "Computer Modern italic";
  font-style: normal; }

#header {
  height: 70px;
  transition: height 0.5s; }

#header, footer {
  background: #0f0a07; }

#siteNav {
  text-align: right;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #f5f3ee;
  z-index: 1;
  border-bottom: 1px #fefefc solid;
  left: 0;
  right: 0;
  overflow: hidden;
  transition: padding 0.5s;
  height: 1em; }

.is-sticky #siteNav {
  border-bottom-color: #c1bcb7; }

#siteNav ul {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto; }

.reducedLogo {
  float: left;
  margin-left: 20px;
  position: relative;
  top: -40px;
  transition: top 0.5s; }

.reducedLogo.show {
  top: 0; }

#siteNav li {
  display: inline-block; }

#siteNav .siteLink {
  margin-right: 1em;
  color: #827e7a; }

#siteNav a.siteLink:hover {
  color: #74b58c; }

#siteNav a.siteLink:active {
  color: #569a6e; }

#siteNav span.siteLink {
  text-decoration: underline; }

#pagearea {
  display: table;
  max-width: 1100px;
  margin: 10px auto;
  padding: 0 20px;
  padding-bottom: 100px; }

footer {
  border-top: 10px solid #827e7a;
  border-bottom: 30px solid #0f0a07;
  position: relative;
  z-index: 10;
  height: 20px; }

.footer-contents {
  max-width: 860px;
  margin: 0 auto; }

footer p, footer p a {
  color: #5a5855; }

footer p a:hover {
  color: #82ca9c; }

.col {
  margin-top: 30px; }

.col.col1 {
  margin-right: 40px; }

a, summary {
  color: #74b58c;
  fill: #74b58c;
  text-decoration: none;
  transition: all 0.5s; }

a:hover, summary:hover {
  color: #4a765a;
  fill: #4a765a;
  text-decoration: underline;
  transition: all 0.2s;
  cursor: pointer; }

a:active, summary:active {
  color: #0f0a07;
  fill: #0f0a07;
  transition: all 0s; }

.internalNav a.active {
  background: #f5f3ee;
  border-left-color: #827e7a; }

.internalNav a {
  display: block;
  padding: 5px;
  margin: 0 -6px;
  border-left: 1px solid #fefefc; }

h1 a, h1 a:hover, li.reducedLogo a {
  color: #0f0a07;
  text-decoration: none; }

.internalNav h2, .marked h2 {
  border-bottom: 1px #c1bcb7 solid;
  padding-bottom: 6px;
  margin: 1.2em 0 0.7em; }

details {
  margin: 1.6em 0; }
  details summary {
    margin-left: 1em;
    margin-bottom: 0.5em; }

/* main four elements making up grid */
.row {
  display: table-row; }

h1, .strapline, .col {
  display: table-cell;
  vertical-align: top; }

/* set width of left column */
h1, .col1 {
  width: 30%; }

h1 {
  font-size: 350%;
  padding: 30px 40px 0.5em 0; }

.strapline {
  padding: 52px 0 0 70px;
  font-size: 180%;
  line-height: 1.1; }

.col2 {
  padding-left: 70px; }

p {
  margin: 0.6em 0 0.6em 0;
  line-height: 1.5; }

#download {
  display: block;
  background: #74b58c;
  padding: 15px;
  box-shadow: inset 0 -3px 0 #69b284;
  border-radius: 6px;
  color: white;
  font-size: 180%;
  margin: 4px 0 40px 0;
  width: 6em;
  text-align: center;
  transition: all 0.5s; }

#download:hover {
  transition: all 0.15s;
  text-decoration: none;
  background: #4a765a;
  box-shadow: inset 0 -3px 0 #569a6e; }

#download:active {
  transition: all 0s;
  background: #569a6e;
  box-shadow: inset 0 3px 0 #44805a;
  padding: 16px 15px 14px 15px; }

#version {
  display: block;
  font-size: 50%;
  margin-top: 6px;
  opacity: 0.6; }

nav ul.links {
  font-size: 120%; }

nav ul.links li {
  margin: 0.5em 0; }

nav ul.sections li {
  margin: 0.3em 0; }

th {
  padding: 0 0 1em 0; }

td {
  padding: 0 0.4em 0.6em 0.4em;
  line-height: 1.5;
  min-width: 7em; }

table {
  margin: 1.5em 0 1em 0; }

thead {
  display: none; }

footer {
  padding: 17px 20px;
  height: 30px; }

#footer-contents {
  text-align: center;
  position: relative;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto; }
  #footer-contents a {
    display: inline-block; }
  #footer-contents .contact {
    position: absolute;
    left: 0.8em;
    padding: 20px 0;
    color: #827e7a; }
  #footer-contents .contact:hover {
    color: #74b58c; }
  #footer-contents .contact:active {
    color: #0f0a07; }
  #footer-contents #externalLinks {
    display: inline-block; }
    #footer-contents #externalLinks .logo {
      fill: #827e7a;
      transition: all 0.5s; }
    #footer-contents #externalLinks a {
      margin: 0 15px;
      padding: 0 15px; }
    #footer-contents #externalLinks a:hover {
      text-decoration: none; }
      #footer-contents #externalLinks a:hover .logo {
        fill: #74b58c;
        transition: all 0.2s; }
    #footer-contents #externalLinks a:active .logo {
      fill: #0f0a07; }
  #footer-contents #sw {
    position: absolute;
    right: 0.8em;
    background: url(http://samwakeling.com/img/sw-icon-100.png) no-repeat;
    height: 64px;
    width: 50px;
    background-size: 100%;
    text-indent: -1000px;
    overflow: hidden;
    opacity: 0.8;
    transition: all 0.6s;
    background-position: 50%; }
  #footer-contents #sw:hover {
    transition: all 0.2s;
    opacity: 1; }

svg.menuButton {
  display: none;
  margin-right: 20px;
  cursor: pointer; }
  svg.menuButton .background {
    fill: #f5f3ee; }
  svg.menuButton .rung {
    fill: #827e7a;
    transition: all 0.5s; }

.open svg.menuButton .rung, svg.menuButton:hover .rung {
  fill: #74b58c; }

svg.menuButton:active .background {
  fill: #fefefc; }
svg.menuButton:active .rung {
  fill: #0f0a07;
  transition: all 0.2s; }

/* Small screens - 1 column */
@media only screen and (max-width: 950px) {
  #header {
    height: 60px; }
  #pagearea {
    display: block; }
  .col1 {
    width: auto; }
  .col2 {
    padding-left: 0px; }
  .row {
    display: block; }
  h1, .strapline, .col {
    display: block;
    vertical-align: top; }
  h1 {
    margin-bottom: 0.1em;
    padding: 30px 0 0.2em 0; }
  h1, .strapline {
    margin-left: auto;
    margin-right: auto;
    text-align: center; }
  body:not(.home) #download {
    display: none; }
  #download {
    margin-left: auto;
    margin-right: auto; }
  #footer-contents {
    height: 135px; }
    #footer-contents #sw, #footer-contents .contact {
      bottom: 0; }
  .col.col1 {
    margin-right: 0; }
  .strapline {
    padding: 0;
    margin-top: 0; }
  #siteNav .siteLink {
    margin-right: 0.7em; } }

/* Even Smaller screens */
@media only screen and (max-width: 600px) {
  figure .lightbox {
    opacity: 1; }
  svg.menuButton {
    display: inline; }
  #siteNav:not(.open) ul {
    display: none; }
  #siteNav li {
    display: block;
    margin-top: 0.2em; }
  #siteNav {
    position: fixed;
    top: 0; }
  #siteNav .siteLink {
    margin-right: 20px; }
  #siteNav li.reducedLogo {
    display: none; }
  #header {
    height: 20px; }
  footer {
    height: 30px; }
  #footer-contents #externalLinks a {
    margin: 0 5px;
    padding: 0 5px; }
  h1, .strapline {
    margin-top: 20px; }
  h1, .col1 {
    width: auto; }
  .col.col1 {
    margin-left: auto;
    margin-right: auto; }
  .strapline {
    width: auto; }
  #pagearea {
    padding: 0 20px; }
  #siteNav {
    text-align: right;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    height: auto; } }

.marked {
  position: relative; }

.marked, .marked pre {
  max-width: 672px; }

.marked pre {
  background-color: #f5f3ee;
  overflow: auto;
  padding: 1em;
  line-height: 1.2em;
  margin: 0em 0 2em 0; }

code {
  font-family: "Computer Modern mono", monospace;
  color: #3d3935;
  font-size: 80%; }
  code .comment {
    color: #74b58c; }
  code .string {
    color: #d8615a; }
  code .keyword {
    color: #50c3db; }

/* inline code examples */
:not(pre) > code {
  display: inline-block;
  background-color: #f5f3ee;
  border-radius: 2px;
  padding: 2px 5px; }

.marked ul, ol {
  margin: 0 2em 2em 2em; }

.marked ul {
  list-style: none; }

/* use bullets from the font and otherwise make them look
   like LaTeX.  */
.marked li {
  margin: 0.5em 0;
  padding-left: 0;
  line-height: 1.5; }

.marked ul li:before {
  content: "•";
  padding-right: 0;
  position: absolute;
  left: 1em; }

@media only screen and (max-width: 950px) {
  .marked, .marked pre {
    max-width: 100%; } }

template {
  /* browsers that don't understand template elements fail to hide them */
  display: none; }

#demoTemplateHolder {
  display: none; }

[data-demo] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 1em 0 2em 0;
  background-color: #fefefc;
  position: relative;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000; }

div.demoCaption {
  position: absolute;
  width: 14em;
  text-align: right;
  bottom: 2em;
  cursor: pointer; }
  div.demoCaption p {
    margin-bottom: 0.3em;
    margin-top: 0; }
  div.demoCaption p, div.demoCaption a {
    /* outline effect */
    text-shadow: -1px -1px 0 #fefefc, 1px -1px 0 #fefefc, -1px 1px 0 #fefefc, 1px 1px 0 #fefefc; }

div.demoCaption:hover a {
  color: #4a765a;
  fill: #4a765a;
  text-decoration: underline;
  transition: all 0.2s;
  cursor: pointer; }

div.demoCaption:active a {
  color: #0f0a07;
  fill: #0f0a07;
  transition: all 0s; }

rect.fade, .lightbox {
  fill: #fefefc;
  opacity: 0.9; }

.lightbox {
  stroke: #74b58c;
  stroke-width: 2;
  vector-effect: non-scaling-stroke; }

.lightbox div {
  text-align: right; }

.lightbox p {
  line-height: 100%;
  margin-bottom: 0.15em; }

.packet text {
  fill: #fefefc;
  text-anchor: middle;
  font-size: 60%; }

.controls text {
  color: #74b58c;
  fill: #74b58c;
  text-decoration: none;
  transition: all 0.5s; }

.controls text.play {
  text-anchor: middle;
  alignment-baseline: middle;
  font-size: 125%; }

.controls:hover {
  cursor: pointer; }

.controls:hover text.play, .controls .reset:hover text {
  color: #4a765a;
  fill: #4a765a;
  text-decoration: underline;
  transition: all 0.2s;
  cursor: pointer; }

.controls:active text.play, .controls .reset:active text {
  color: #0f0a07;
  fill: #0f0a07;
  transition: all 0s; }

.clickableArea {
  opacity: 0; }

.paused .controls .reset:not(:hover) text {
  fill: #c8c5c1; }

.pie-divide {
  fill: none;
  stroke: #fefefc;
  stroke-width: 1; }

.aerial {
  fill: #74b58c; }

g.client.received-0 .part.unit-0 {
  display: inline; }

.unit-0 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-1 .part.unit-1 {
  display: inline; }

.unit-1 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-2 .part.unit-2 {
  display: inline; }

.unit-2 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-3 .part.unit-3 {
  display: inline; }

.unit-3 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-4 .part.unit-4 {
  display: inline; }

.unit-4 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-5 .part.unit-5 {
  display: inline; }

.unit-5 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-6 .part.unit-6 {
  display: inline; }

.unit-6 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-7 .part.unit-7 {
  display: inline; }

.unit-7 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-8 .part.unit-8 {
  display: inline; }

.unit-8 .packet.airwave {
  fill: none;
  stroke: black; }

g.client.received-9 .part.unit-9 {
  display: inline; }

.unit-9 .packet.airwave {
  fill: none;
  stroke: black; }

.packet.airwave {
  stroke-width: 5px; }

line.wire.cable {
  stroke: #74b58c;
  stroke-width: 4;
  stroke-linecap: round; }

line.messageOuter {
  stroke: #74b58c;
  stroke-width: 41;
  stroke-linecap: round; }

line.messageInner {
  stroke: white;
  stroke-width: 35;
  stroke-linecap: round; }

g.client .frame, .server .box, .graph .bars, .graph .axes {
  fill: #827e7a;
  shape-rendering: crispEdges; }

.aerial circle, circle.aerial, .browser .frame, .tower .area, .server .box {
  stroke: #fefefc;
  stroke-width: 3;
  stroke-linejoin: round; }

.playing text.label {
  fill: #c8c5c1; }

text.label {
  text-anchor: middle;
  fill: #fefefc;
  font-family: "Computer Modern italic";
  transition: fill 1s;
  /* outline effect */
  text-shadow: -1px -1px 0 #fefefc, 1px -1px 0 #fefefc, -1px 1px 0 #fefefc, 1px 1px 0 #fefefc; }

.tower .area {
  fill: #fefefc;
  stroke: #fefefc;
  stroke-width: 9; }

.browser .background {
  stroke: #fefefc;
  stroke-width: 4;
  fill: white;
  shape-rendering: crispEdges; }

.browser .frame {
  stroke: #fefefc;
  stroke-width: 1; }

.tower .structure, .barrier .wall, .barrier .shadow, .browser .progressBar .bar {
  fill: #827e7a; }

.progressBar, .tweet .shading {
  shape-rendering: crispEdges; }

.browser .progressBar .space {
  fill: #c8c5c1;
  opacity: 0.8; }

.map .progressBar .space {
  fill: #fefefc; }

.browser .progressBar {
  transition: opacity 0.5s;
  transition-delay: 0.5s; }

.browser .progressBar.complete {
  opacity: 0; }

.barrier .shadow {
  fill: #c8c5c1; }

g.client .viewPort {
  fill: #fefefc; }

g.client .part {
  display: none; }

.tweet .detail {
  fill: #fefefc;
  opacity: 0.5; }

.browser .spinner {
  fill: #c8c5c1;
  stroke: none; }

.client g.spinnerContainer {
  opacity: 1;
  transition: opacity 1s;
  transition-delay: opacity 0.5s; }

.client:not(.requesting) g.spinnerContainer {
  opacity: 0; }

.map .water {
  fill: #3f8fb4; }
.map .parks {
  fill: #74b58c; }
.map .roads {
  fill: none;
  stroke: #c8c5c1; }
.map .roads.minor {
  stroke-width: 1; }
.map .roads.major {
  stroke-width: 3; }
.map .pins .shadow {
  fill: #0f0a07;
  opacity: 0.2; }
.map .pins .pointer {
  stroke: #fefefc; }

.graph .axes {
  fill: none;
  stroke: #f5f3ee;
  stroke-width: 3;
  transition: stroke 0.5s; }
.graph .points line {
  stroke: black;
  stroke-width: 2; }
.graph .points circle {
  stroke: #fefefc; }

.received-1 .graph .axes {
  stroke: #c8c5c1; }

.cartogram path[data-state] {
  shape-rendering: crispEdges; }
.cartogram path {
  transition: fill 0.5s; }
.cartogram path, .cartogram circle {
  stroke: #fefefc;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  fill: #c8c5c1; }
.cartogram .pie line {
  vector-effect: non-scaling-stroke;
  stroke: #fefefc;
  stroke-width: 1; }

@media only screen and (max-width: 600px) {
  .cartogram path, circle {
    stroke-width: 0.5; } }

.categorical {
  /* categorical colors for packets */ }
  .categorical .unit-0 {
    fill: #1f77b4; }
  .categorical .unit-0 .airwave {
    stroke: #1f77b4; }
  .categorical .unit-1 {
    fill: #ff7f0e; }
  .categorical .unit-1 .airwave {
    stroke: #ff7f0e; }
  .categorical .unit-2 {
    fill: #2ca02c; }
  .categorical .unit-2 .airwave {
    stroke: #2ca02c; }
  .categorical .unit-3 {
    fill: #9467bd; }
  .categorical .unit-3 .airwave {
    stroke: #9467bd; }
  .categorical .unit-4 {
    fill: #d62728; }
  .categorical .unit-4 .airwave {
    stroke: #d62728; }
  .categorical .unit-5 {
    fill: #8c564b; }
  .categorical .unit-5 .airwave {
    stroke: #8c564b; }
  .categorical .unit-6 {
    fill: #e377c2; }
  .categorical .unit-6 .airwave {
    stroke: #e377c2; }
  .categorical .unit-7 {
    fill: #7f7f7f; }
  .categorical .unit-7 .airwave {
    stroke: #7f7f7f; }
  .categorical .unit-8 {
    fill: #bcbd22; }
  .categorical .unit-8 .airwave {
    stroke: #bcbd22; }
  .categorical .unit-9 {
    fill: #17becf; }
  .categorical .unit-9 .airwave {
    stroke: #17becf; }

.twoSeries .unit-0 {
  fill: #da6600; }
.twoSeries line.unit-0 {
  stroke: #da6600; }
.twoSeries .unit-1 {
  fill: #2b95db; }
.twoSeries line.unit-1 {
  stroke: #2b95db; }
.twoSeries .unit-2 {
  fill: #ff9a41; }
.twoSeries line.unit-2 {
  stroke: #ff9a41; }
.twoSeries .unit-3 {
  fill: #185b88; }
.twoSeries line.unit-3 {
  stroke: #185b88; }
.twoSeries .unit-4 {
  fill: #da6600; }
.twoSeries line.unit-4 {
  stroke: #da6600; }
.twoSeries .unit-5 {
  fill: #2b95db; }
.twoSeries line.unit-5 {
  stroke: #2b95db; }
.twoSeries .unit-6 {
  fill: #ff9a41; }
.twoSeries line.unit-6 {
  stroke: #ff9a41; }
.twoSeries .unit-7 {
  fill: #185b88; }
.twoSeries line.unit-7 {
  stroke: #185b88; }
.twoSeries .unit-8 {
  fill: #da6600; }
.twoSeries line.unit-8 {
  stroke: #da6600; }
.twoSeries .unit-9 {
  fill: #2b95db; }
.twoSeries line.unit-9 {
  stroke: #2b95db; }

.political [data-wonby=dem] {
  fill: #1f77b4; }
.political [data-wonby=rep] {
  fill: #d62728; }

.origin-slow rect.box {
  fill: #cf823e; }

.origin-fast rect.box {
  fill: #49708a; }

.aggregator rect.box {
  fill: #9382a2; }

.aerial.request, .packet.request {
  fill: #57aae2; }

.request .packet.airwave {
  stroke: #57aae2; }

span.server1 {
  background-color: rgba(31, 119, 180, 0.2); }

span.server2 {
  background-color: rgba(255, 127, 14, 0.2); }

span.aggregator {
  background-color: rgba(148, 103, 189, 0.2); }

figure[data-demo=big-small] .client1 .frame {
  fill: #49708a; }
figure[data-demo=big-small] .client2 .frame {
  fill: #cf823e; }
figure[data-demo=big-small] .client3 .frame {
  fill: #9382a2; }

span.client1 {
  background-color: rgba(31, 119, 180, 0.2); }

span.client2 {
  background-color: rgba(255, 127, 14, 0.2); }

span.client3 {
  background-color: rgba(148, 103, 189, 0.2); }

span.place {
  background-color: rgba(200, 197, 193, 0.5); }