example-viewer/src/css/styles.css

A presentation tool for code examples.

body {
  margin: 0px;
  font-family: Sans-Serif;
}

.CodeMirror {
  font-size: 2.6rem;
  height: auto;
}

/* Adds a shadow effect. Inspired by Material Design "Cards". */
.shadow {
  box-shadow: 1px 1px 4px gray;
}

.header {
  padding: 1rem;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 3;
  text-shadow:
    0px 0px 5px white,
    0px 0px 10px white,
    0px 0px 15px white,
    0px 0px 20px white,
    0px 0px 25px white,
    0px 0px 30px white,
    0px 0px 35px white,
    0px 0px 40px white,
    0px 0px 45px white,
    0px 0px 50px white
  ;
  background: linear-gradient(white, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}
.header-breadcrumbs {
  font-size: 2.5rem;
  color: #999;
}
.header-title {
  font-size: 5rem;
}

.runner {
  position: fixed;
  top: 0px;
  right: 0px;
  background-color: white;
}

.overlay {
  position: fixed;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  pointer-events: none;
  z-index: 6; /* Above everything else. */
}

.editor-filename-label {
  font-size: 2.5em;
  padding-left: 1rem;
  margin-top: 20px;
  color: #999;
}

.spacer-top {
  margin-top: 20rem;
}
.spacer-bottom {
  margin-top: 50rem;
}