jupyterlab/docs/source/_static/css/custom.css

h4 {
  font-size: 100%;
}

.wy-nav-side p.caption {
  color: #f5f5f5;
}

div.wy-side-nav-search {
  background: #f37626;
}

.wy-nav-content iframe {
  margin: auto;
  display: block;
}

.wy-breadcrumbs-aside img {
  height: 1em !important;
}

/* Elevation
  *
  * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
  *
  * https://github.com/material-components/material-components-web
  * https://material-components-web.appspot.com/elevation.html
  */

.rst-content img.jp-screenshot {
  border: none;
  /* MD Elevation 8 */
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(145, 145, 145, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  margin-bottom: 24px;
}

/* 
 * The div.jp-youtube-video styling is done to get the YouTube video to size dynamically
 * to 100% of the content width.
 */

.rst-content div.jp-youtube-video {
  position: relative;
  width: 100%;
  height: 0px;
  /* This must be equal to the inverse of the aspect ratio of the video */
  /* The current value is: 56.25% = 315/560 */
  padding-bottom: 56.25%;
  border: none;
  /* MD Elevation 8 */
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  margin-bottom: 24px;
}

.rst-content div.jp-youtube-video iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}