youtube-chapters/dist/css/youtube-chapters.css

A chapters markers generator plugin for a YouTube video, built using JavaScript.

/*!
 * youtube-chapters
 * A YouTube chapter generator
 * https://github.com/VD39/youtube-chapters
 * @author Vijay Dubb
 * @version 3.1.0
 * Copyright 2013. MIT licensed.
 */

/*---- Reset all styles ----*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
img,
video {
  display: block; }

.loading {
  position: absolute; }
  .loading .loading-wrapper {
    position: relative;
    background: #f1f1f1;
    height: 150px; }
    .loading .loading-wrapper:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 999;
      width: 150px;
      border: solid 10px #ffffff;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }
    .loading .loading-wrapper:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 15px;
      height: 15px;
      z-index: 999;
      background: royalblue;
      -webkit-animation-name: loading-youtube-video;
              animation-name: loading-youtube-video;
      -webkit-animation-duration: .5s;
              animation-duration: .5s;
      -webkit-animation-direction: alternate;
              animation-direction: alternate;
      -webkit-animation-timing-function: ease-in-out;
              animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite; }
    .loading .loading-wrapper .loading-text {
      position: absolute;
      top: 70%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%); }

@-webkit-keyframes loading-youtube-video {
  0% {
    -webkit-transform: translate(-72.5px, -7.5px);
            transform: translate(-72.5px, -7.5px); }
  100% {
    -webkit-transform: translate(58.5px, -7.5px);
            transform: translate(58.5px, -7.5px); } }

@keyframes loading-youtube-video {
  0% {
    -webkit-transform: translate(-72.5px, -7.5px);
            transform: translate(-72.5px, -7.5px); }
  100% {
    -webkit-transform: translate(58.5px, -7.5px);
            transform: translate(58.5px, -7.5px); } }

.youtube-chapter-wrapper {
  visibility: hidden;
  padding: 0;
  margin: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .youtube-chapter-wrapper.complete {
    visibility: visible; }
  .youtube-chapter-wrapper .youtube-wrapper {
    -webkit-box-flex: 3;
        -ms-flex: 3 1 70%;
            flex: 3 1 70%; }
    .youtube-chapter-wrapper .youtube-wrapper .fluid-wrapper {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 25px;
      height: 0; }
      .youtube-chapter-wrapper .youtube-wrapper .fluid-wrapper .youtube-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
  .youtube-chapter-wrapper .chapters-wrapper {
    border: 1px solid #ccc;
    width: 350px;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 30%;
            flex: 1 1 30%;
    overflow-x: overlay; }
    .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper {
      border-top: 1px solid #ccc;
      cursor: pointer; }
      .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper:last-child {
        border-bottom: 1px solid #ccc; }
      .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper:nth-child(even) {
        background-color: #F9F9F9; }
      .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper.current {
        background-color: #9f9f9f; }
        .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper.current:hover {
          background-color: #9f9f9f; }
      .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper:hover {
        background-color: #F5F5F5; }
      .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper .chapter-point {
        display: block;
        padding: 10px 55px 10px 15px;
        text-decoration: none;
        color: #000000;
        position: relative; }
      .youtube-chapter-wrapper .chapters-wrapper .chapter-point-wrapper .time {
        float: right;
        position: absolute;
        right: 10px; }
  .youtube-chapter-wrapper .text-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1 100%;
            flex: 1 100%;
    margin-top: 15px; }
    .youtube-chapter-wrapper .text-wrapper .text-point {
      display: none;
      padding: 5px;
      border: 1px solid #ccc; }
      .youtube-chapter-wrapper .text-wrapper .text-point.current {
        display: block; }