pageflow 0.10.0 → 0.11.0

data/app/assets/stylesheets/pageflow/{navigation_mobile.css.scss → navigation_mobile.scss}

@@ -42,7 +42,6 @@ body {
 .navigation_mobile {
   z-index: 1;
   color: #fff;
-  font-family: sourcesanspro;
   position: absolute;
   top: 0;
   right: 0;
@@ -73,7 +72,6 @@ body {
     position: absolute;
     width: 45px;
     height: 45px;
-    background-image: image-url('pageflow/menu_mobile_sprite3.png');
     background-position: -45px 0px;
     background-size: auto 100%;
     right: 10px;
@@ -89,13 +87,11 @@ body {
       opacity: 0;
       pointer-events: none;
       bottom: 16px;
-      background-image: image-url('pageflow/menu_mobile_imprint.png');
     }
     &.sharing {
-      top: 80px;
+      bottom: 80px;
       opacity: 0;
       pointer-events: none;
-      background-image: image-url('pageflow/menu_mobile_sharing.png');
     }
   }
 
@@ -145,7 +141,6 @@ body {
     bottom: 0;
     width: 0;
     overflow: hidden;
-    background-color: #232323;
     @include transition(visibility 250ms, right 250ms, width 0s 250ms);
 
     .navigation_site_detail {
@@ -153,15 +148,8 @@ body {
     }
 
     .credits {
-      font-family: "sourcesanspro";
-
       a {
         margin-top: 1em;
-        color: #b4c552;
-
-        &:hover {
-          color: white;
-        }
       }
     }
 
@@ -271,13 +259,8 @@ body {
       }
     }
 
-    a.active {
-      border-left: 5px solid #A6D513;
-    }
-
     .credits {
       padding: 15px;
-      color: grey;
     }
   }
 
@@ -356,7 +339,6 @@ body {
 
         > a {
           margin-left: 78px;
-          color: white;
           text-decoration: none;
           font-size: 24px;
           padding-top: 12px;
@@ -368,7 +350,6 @@ body {
             position: absolute;
             width: 42px;
             height: 37px;
-            background-image: image-url('pageflow/mobile_sharing.png');
             background-size: 100% auto;
             left: 30px;
             top: 30px;

data/app/assets/stylesheets/pageflow/{overview.css.scss → overview.scss}

@@ -4,7 +4,6 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  font-family: sourcesanspro;
   position: absolute;
   top: 0;
   left: 0;
@@ -14,6 +13,10 @@
     visibility: visible;
   }
 
+  &.active:after {
+    opacity: 1;
+  }
+
   &:after {
     content: "";
     position: absolute;
@@ -22,17 +25,12 @@
     right: 0;
     bottom: 0;
     z-index: 1;
-    background-color: black;
     opacity: 0;
     @include transition(0.5s ease);
   }
 
-  &.active:after {
-    opacity: 0.4;
-  }
-
   &.active .content {
-    @include transform(translate(0,0));
+    @include transform(translate(0, 0));
   }
 
   .scroll_indicator {
@@ -59,8 +57,7 @@
     bottom: 0;
     left: 8%;
     right: 120px;
-    height: 535px;
-    color: #fff;
+    height: 555px;
     overflow: hidden;
     z-index: 2;
     margin: auto;
@@ -70,7 +67,6 @@
     h2 {
       margin-left: 10px;
       margin-bottom: 0;
-      font-size: 3em;
       margin-top: 0;
     }
 
@@ -93,8 +89,6 @@
       height: 400px;
       margin-top: 25px;
       margin-right: 10px;
-      background-image: image-url('pageflow/chapter_bg.png');
-      background-repeat: repeat-y;
 
       &:before, &:after {
         content: " ";
@@ -107,22 +101,18 @@
       &:before {
         top: -10px;
         left: 0;
-        background-image: image-url('pageflow/chapter_top.png');
       }
 
       &:after {
         bottom: -10px;
         left: 0;
-        background-image: image-url('pageflow/chapter_bottom.png');
       }
 
       .heading-4 {
         display: block;
-        font-weight: bold;
         margin: 10px 17px;
         margin-top: 0;
         height: 44px;
-        font-size: 1.1em;
         overflow: hidden;
       }
 
@@ -130,9 +120,6 @@
         display: block;
         margin: 5px 17px;
         height: 20px;
-        font-size: 1em;
-        text-transform: uppercase;
-        font-weight: normal;
       }
 
       @mixin dimensions {
@@ -151,13 +138,10 @@
         position: relative;
         margin-left: 15px;
         margin-bottom: 5px;
-        border: 1px solid #505050;
-        color: #fff;
 
 
         &.active {
           cursor: default;
-          border-color: #ddd;
         }
 
         &:active {
@@ -231,8 +215,6 @@
         padding: 5px;
         width: 149px;
         height: 62px;
-        background-color: #5d6c0c;
-        border-right: 1px solid #505050;
         overflow: hidden;
         opacity: 0;
 
@@ -249,13 +231,5 @@
         }
       }
     }
-
-    .ov_chapter:first-of-type:before {
-      background-image: image-url('pageflow/chapter_start.png');
-    }
-
-    .ov_chapter:last-of-type:after {
-      background-image: image-url('pageflow/chapter_end.png');
-    }
   }
 }

data/app/assets/stylesheets/pageflow/{page.css.scss → page.scss}

@@ -19,6 +19,7 @@
   }
 
   .shadow {
+    @include transition(opacity 0.2s linear, visibility 0.2s linear);
     @include shadow(#000);
     pointer-events: none;
   }
@@ -123,53 +124,6 @@
       }
     }
   }
-
-  .close_button {
-    cursor: pointer;
-    display: block;
-    background-position: -45px 0;
-    background-repeat: no-repeat;
-    width: 45px;
-    height: 45px;
-    position: absolute;
-    top: 20px;
-
-    right: 100px;
-    z-index: 10;
-    background-size: 200% auto;
-    background-image: image-url('pageflow/close_sprite_shadow.png');
-
-    &:hover {
-      background-position: 0 0;
-    }
-
-    .label {
-      text-transform: uppercase;
-      text-shadow: 1px 1px 4px #2b2b2b;
-      font-size: 1.0em;
-      letter-spacing: 0.1em;
-      color: #FFFEFE;
-      position: absolute;
-      margin-right: 115%;
-      text-align: right;
-      right: 0px;
-      margin-top: 14px;
-      margin-left: 1em;
-    }
-
-    @include phone {
-      right: 40px;
-    }
-
-    @include pad_portrait {
-      right: 40px;
-    }
-  }
-
-  &.invert .close_button .label {
-    color: #2b2b2b;
-    text-shadow: 1px 1px 4px #fff;
-  }
 }
 
 .contentText {

data/app/assets/stylesheets/pageflow/page_types/{audio.css.scss → audio.scss}

@@ -7,17 +7,6 @@
   right: 0;
 }
 
-.audioPage .vjs-control-bar {
-  position: absolute;
-  left: 50%;
-}
-
-.audioPage {
-  .vjs-controls.vjs-player {
-    display: none;
-  }
-}
-
 .js .audioPage {
   .contentText {
     margin-bottom: 200px;
@@ -26,10 +15,6 @@
   .non_js_audio {
     display: none;
   }
-
-  .vjs-slider-handle {
-    margin-left:-17px;
-  }
 }
 
 .non_js .text_position_right .audioPage {

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

@@ -0,0 +1,116 @@
+@import "./video/content_hiding";
+
+.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;
+}
+
+.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 {
+    /* 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-tech {
+    height: 100%;
+  }
+}
+
+.non_js .text_position_right .videoPage {
+  .page_header {
+    margin-left: 0;
+    max-width: initial;
+
+    > * {
+      max-width: 500px;
+      width: 60%;
+      margin-left: auto;
+    }
+  }
+}
+
+.js .non_js_video {
+  display: none;
+}