pageflow 0.0.1

data/app/assets/stylesheets/pageflow/page_types/video.css.scss

@@ -0,0 +1,221 @@
+.videoWrapper {
+  @include desktop {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+  @include pad_portrait {
+    margin-right: 0;
+    position: initial;
+    height: initial;
+  }
+}
+
+.js .videoWrapper {
+  @include desktop {
+    position: relative;
+    height: 100%;
+    width: auto;
+    margin-right: 85px;
+  }
+  @include pad_portrait {
+    margin-right: 0;
+  }
+}
+
+.has_phone_platform .page .videoPage .videoWrapper {
+  margin-right: 0;
+  position: initial;
+  height: 100%;
+
+  video {
+    width: 1px;
+    height: 1px;
+    left: -1;
+  }
+}
+
+.video-js.player {
+  position: relative;
+}
+
+.js .video-js.player {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.page[data-template="video"] {
+  background-color: #000000;
+}
+
+.video-js {
+  .vjs-big-play-button {
+    display: none;
+  }
+}
+
+.videoPage .video-js {
+  background-color: transparent;
+
+  .vjs-tech {
+    height: auto;
+  }
+}
+
+.page .videoPage {
+  .shadow {
+    display: none;
+  }
+
+  .contentText {
+    padding-top: 2em;
+  }
+
+  .scroller.vjs-fade-out {
+    visibility: initial;
+  }
+
+  .scroller {
+    /* required for IE 10 to enable mouse events */
+    background-image: image-url('pageflow/empty.png');
+  }
+
+  .vjs-poster-mobile {
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: cover;
+    cursor: pointer;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  .vjs-poster {
+    background-color: black;
+  }
+
+  .backgroundArea {
+    height: initial;
+  }
+
+  video {
+    height: auto;
+    width: 100%;
+  }
+}
+
+.js .page .videoPage {
+  .contentText {
+    padding-top: initial;
+    margin-bottom: 200px;
+  }
+
+  .shadow {
+    display: block;
+  }
+
+  .backgroundArea {
+    height: 100%;
+  }
+
+  .vjs-control-bar {
+    @include transform(translate3d(-50%, 0, 0));
+  }
+  .vjs-tech {
+    height: 100%;
+  }
+
+  /* overwriting video js auto hiding control rules */
+  /* Fading sytles, used to fade control bar. */
+  .vjs-fade-in {
+    display: initial !important;
+    visibility: initial;
+    /* Needed to make sure things hide in older browsers too. */
+    opacity: initial;
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none }
+
+  .vjs-fade-out {
+    display: initial!important;
+    visibility: initial;
+    opacity: initial;
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+    /* Wait a moment before fading out the control bar */
+    -webkit-transition-delay: none;
+    -moz-transition-delay: none;
+    -ms-transition-delay: none;
+    -o-transition-delay: none;
+    transition-delay: none; }
+
+  /* Hide disabled or unsupported controls */
+  .vjs-default-skin .vjs-hidden {
+    display: initial; }
+
+  .vjs-lock-showing {
+    display: initial !important;
+    opacity: initial;
+    visibility: initial; }
+
+    /* Fading sytles, used to fade control bar. */
+  .fade-in {
+    display: block !important;
+    /* Needed to make sure things hide in older browsers too. */
+    opacity: 1;
+    -webkit-transition: 0.1s;
+    -moz-transition: 0.1s;
+    -ms-transition: 0.1s;
+    -o-transition: 0.1s;
+    transition: 0.1s;
+  }
+
+  .fade-out {
+    display: block !important;
+    opacity: 0 !important;
+    -webkit-transition: 1.5s;
+    -moz-transition: 1.5s;
+    -ms-transition: 1.5s;
+    -o-transition: 1.5s;
+    transition: 1.5s;
+    /* Wait a moment before fading out the control bar */
+    -webkit-transition-delay: 2s;
+    -moz-transition-delay: 2s;
+    -ms-transition-delay: 2s;
+    -o-transition-delay: 2s;
+    transition-delay: 2s; }
+
+  /* Hide disabled or unsupported controls */
+  .vjs-default-skin .vjs-hidden {
+    display: none; }
+
+  .lock-showing {
+    display: block !important;
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.non_js .text_position_right .videoPage {
+  .page_header {
+    margin-left: 0;
+    max-width: initial;
+
+    > * {
+      max-width: 500px;
+      width: 60%;
+      margin-left: auto;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/player_controls.css.scss

@@ -0,0 +1,301 @@
+.controls .add_info_box {
+  width: 87%;
+  margin: 1em 5% 1.5em 8%;
+  position: relative;
+  z-index: 2;
+  font-size: 0.8em;
+  color: white;
+
+  p {
+    margin: 0 3% 15px 3%;
+    width: 94%;
+  }
+
+  h3 {
+    margin: 15px 3%;
+    width: 100%;
+  }
+
+  &.empty {
+    display: none;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: -3px;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(39, 39, 39, 1);
+    border: 3px solid rgb(39,39,39);
+    z-index: -1;
+    opacity: 0.95;
+    border-radius: 4px;
+  }
+}
+
+.js .vjs-control {
+  pointer-events: all;
+}
+
+.js {
+  .controls {
+    position: absolute;
+    bottom: 10%;
+    left: 0;
+    width: 100%;
+    z-index: 2;
+
+    .control_bar_text {
+      position: absolute;
+      left: 80px;
+      top: 20px;
+      color: #ddd;
+
+      @include phone {
+        display: none;
+      }
+    }
+  }
+
+  .add_info_box {
+    pointer-events: none;
+    margin: 0 0 63px 0;
+    width: 434px;
+    bottom: 0;
+    margin-bottom: 63px;
+    position: absolute;
+    left: 50%;
+    @include transform(translate3d(-50%, 0,0));
+    z-index: 2;
+    font-size: 0.8em;
+    max-width: 90%;
+  }
+
+  .vjs-control-bar {
+    position: absolute;
+    width: 434px;
+    height: 60px;
+    bottom: 0;
+    background-color: #191919;
+    border: 3px solid #505050;
+    left: 50%;
+    z-index: 2;
+    @include transform(translate3d(-50%, 0, 0));
+    display: block;
+  }
+
+  .vjs-control-bar:before {
+    position: absolute;
+    border-right: 2px solid #505050;
+    top: 0;
+    left: 64px;
+    width: 0;
+    height: 60px;
+    content: "";
+  }
+
+  .vjs-controls {
+    width: 100%;
+    height: 100%;
+    &.vjs-player {
+      display: block;
+    }
+
+    .vjs-progress-control:focus {
+      background: rgba(100, 100, 100, 0.7);
+      -webkit-box-shadow: 0 0 2em white;
+      -moz-box-shadow: 0 0 2em white;
+      box-shadow: 0 0 2em white;
+    }
+    .vjs-play-control:focus {
+      outline: 3px solid #c1c1c1;
+    }
+  }
+
+  .vjs-control:before {
+    text-shadow: none;
+  }
+
+  .vjs-play-control:focus {
+    outline: 3px solid #c1c1c1;
+  }
+
+  .vjs-play-control {
+    width: 40px;
+    height: 40px;
+    margin-top: 10px;
+    margin-left:11px;
+    background-position: center top;
+    background-image: image-url('pageflow/video_controls.png');
+
+    &:hover { background-position: center -40px; }
+    &:active, &.touched { background-position: center -80px; }
+
+    &.vjs-pause { background-position: center -120px; }
+    &.vjs-pause:hover { background-position: center -160px; }
+    &.vjs-pause:active, &.vjs-pause.touched { background-position: center -200px; }
+
+    &.vjs-playing { background-position: center -120px; }
+    &.vjs-playing:hover { background-position: center -160px; }
+    &.vjs-playing:active, &.vjs-paused.touched {  background-position: center -200px; }
+
+    &.pressed:focus {
+      outline: none;
+    }
+
+    &:before {
+      content: ""
+    }
+  }
+
+  .vjs-progress-control, .vjs-progress-control.vjs-fade-out {
+    left: 90px;
+    right: 114px;
+    top: 25px;
+    height: 9px;
+
+    .vjs-progress-holder {
+      border-radius: 4px;
+      background-color: #333333;
+    }
+
+    .vjs-play-progress {
+      border-radius: 4px;
+      background: initial;
+      /*background-color: #18d4d6;*/
+      background-color: #b4c552;
+    }
+  }
+
+  .vjs-control:before {
+    color: transparent;
+  }
+
+  .vjs-slider-handle {
+    height: 40px;
+    top: -15px;
+    width: 24px;
+    background-image: image-url('pageflow/video_controls.png');
+    background-position: center -240px;
+  }
+
+  .vjs-slider-handle:before {
+    content: "";
+  }
+
+  .vjs-duration-divider, .vjs-fullscreen-control, .vjs-volume-control, .vjs-mute-control {
+    display: none;
+  }
+
+  .vjs-current-time, .vjs-time-divider, .vjs-duration {
+    font-family: SourceSansPro;
+    font-size: 15px;
+    position: relative;
+    margin-top: 7px;
+  }
+
+  .vjs-current-time {
+    left: 276px;
+  }
+
+  .vjs-time-divider {
+    left: 268px;
+  }
+
+  .vjs-duration {
+    left: 260px;
+  }
+
+  .vjs-default-skin {
+    .vjs-loading-spinner {
+      top: 29px;
+      left: 30px;
+      opacity: 1;
+
+      &:before {
+        content: " ";
+        background-image: image-url('pageflow/loading_small.png');
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+      &:after {
+        content: " ";
+      }
+    }
+  }
+
+  .showing-for-underrun {
+    display: block !important;
+  }
+
+  @include phone {
+    .vjs-progress-control,
+    .vjs-current-time,
+    .vjs-time-divider,
+    .vjs-duration,
+    .vjs-control-bar:before {
+      display: none;
+    }
+
+    .vjs-control-bar {
+      top: 50%;
+      margin-top: -30px;
+      bottom: auto;
+      height: 60px;
+      border: none;
+      background: none;
+      width: 90%;
+      left: 50%;
+      margin-left: -4px;
+      max-width: 435px;
+      pointer-events: none;
+    }
+
+    .add_info_box {
+      position: relative;
+      padding: 1px;
+      margin-bottom: 0;
+      padding-left: 0;
+      max-width: 435px;
+      min-height: 60px;
+      width: 90%;
+
+      &.empty {
+        display: block;
+
+        &:before {
+          display: none;
+        }
+      }
+
+      &:after {
+        content: "";
+        position: absolute;
+        left: -3px;
+        top: 0;
+        width: 60px;
+        height: 100%;
+        padding-bottom: 0px;
+        background-color: #111;
+        z-index: -1;
+        opacity: 0.9;
+      }
+      &:before {
+        border: 0;
+      }
+
+      h3, p {
+        margin-left: 70px;
+        width: 70%;
+      }
+    }
+  }
+
+  @include phone_portrait {
+    .controls {
+      bottom: 50px;
+    }
+  }
+}