pageflow 0.10.0 → 0.11.0

data/app/assets/stylesheets/pageflow/themes/legacy.scss

@@ -0,0 +1,8 @@
+@import "video-js";
+
+@import "./legacy/indicators";
+@import "./legacy/page_types";
+@import "./legacy/navigation";
+@import "./legacy/overview";
+@import "./legacy/video_player";
+@import "./legacy/player_controls";

data/app/assets/stylesheets/pageflow/themes/legacy/indicators.scss

@@ -0,0 +1,64 @@
+// scss-lint:disable all
+
+.entry {
+  .indicator {
+    color: #e6e6e6;
+
+    text-transform: uppercase;
+    text-shadow: 1px 1px 4px rgba(43, 43, 43, 1);
+    font-size: 0.92em;
+    letter-spacing: 0.2em;
+
+    padding-left: 40px;
+    font-family: sourcesanspro;
+    padding-top: 6px;
+
+    &:before {
+      background-size: auto auto;
+      background-position: top left;
+      background-repeat: no-repeat;
+      content: "";
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 1px;
+      position: absolute;
+    }
+
+    @include phone {
+      text-shadow: 1px 1px 1px rgba(43, 43, 43, 1);
+      font-size: 0.8em;
+      letter-spacing: 0.1em;
+    }
+  }
+
+  .scroll_indicator {
+    &:before {
+      background-image: image-url("pageflow/themes/legacy/scroll_down_indicator.png");
+    }
+
+    &.invert {
+      text-shadow: 1px 1px 4px #FDFDFD;
+      color: #0A0A0A;
+
+      &:before {
+        background-image: image-url("pageflow/themes/legacy/scroll_down_indicator_invert.png");
+      }
+    }
+  }
+
+  .hidden_text_indicator {
+    display: none;
+    left: 8%;
+
+    &:before {
+      background-image: image-url("pageflow/themes/legacy/touch_indicator.png");
+    }
+
+    &.invert {
+      &:before {
+        background-image: image-url("pageflow/themes/legacy/touch_indicator_invert.png");
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/legacy/navigation.scss

@@ -0,0 +1,262 @@
+// scss-lint:disable all
+
+$bg-color: #353535;
+$nav-color: #9c9c9c;
+
+.navigation {
+  color: $nav-color;
+
+  @mixin box {
+    background-color: $bg-color;
+    border: 2px solid $nav-color;
+    right: 90px;
+
+    &:before {
+      content: " ";
+      background-image: image-url("pageflow/themes/legacy/menu-arrow-short.png");
+      display: block;
+      position: absolute;
+      width: 10px;
+      height: 38px;
+      left: 100%;
+      top: 4px;
+    }
+  }
+
+  a {
+    @include hover {
+      -webkit-mask-image: image-url("pageflow/themes/legacy/page_thumbnail_mask.png");
+      -webkit-mask-position-y: 2px;
+    }
+  }
+
+  .navigation_site_detail {
+    @include box;
+    font-size: 1em;
+    line-height: 1.1em;
+    font-family: sourcesanspro;
+    color: white;
+  }
+
+  .navigation_bullet {
+    background-color: $bg-color;
+
+    @include hover {
+      -webkit-mask-image: none;
+    }
+  }
+
+  .navigation_menu {
+    a {
+      -webkit-mask-position-y: -4px !important;
+    }
+  }
+
+  .navigation_menu_box {
+    @include box;
+
+    a {
+      @include hover {
+        -webkit-mask-image: none;
+      }
+    }
+
+    &:before {
+      top: auto;
+      bottom: -2px;
+    }
+  }
+
+  .navigation_share_box {
+    $size: 28px;
+    width: 210px;
+
+    a {
+      float: left;
+      text-decoration: none;
+      padding: 0 15px 0 15px;
+      width: 39px;
+
+      p {
+        color: $nav-color;
+        font-size: 9px;
+        margin-bottom: 0;
+        text-align: center;
+      }
+
+      .button {
+        width: $size;
+        height: $size;
+        margin: auto;
+      }
+    }
+  }
+
+  .navigation_credits_box {
+    font-family: "sourcesanspro";
+    font-size: 1em;
+
+    a {
+      color: #b4c552;
+    }
+  }
+}
+
+.navigation.js {
+  .navigation_bg,
+  .navigation_bullet .button {
+    background-repeat: no-repeat;
+    border-bottom: 2px solid $nav-color;
+  }
+
+  .navigation_bar_top,
+  .navigation_bar_bottom {
+    opacity: 0.9;
+
+    li:last-child a .button {
+      border-bottom: none;
+    }
+  }
+
+  .navigation_bar_top {
+    top: 0;
+    height: 180px;
+
+    &:after {
+      background-color: $bg-color;
+      content: " ";
+      display: block;
+      height: 50px;
+      width: 100%;
+    }
+  }
+
+  .scroller {
+    top: 180px;
+    bottom: 268px;
+
+    &:after {
+      background-color: $bg-color;
+      opacity: 0.9;
+    }
+
+    a {
+      background-color: $bg-color;
+      background-color: rgba(53, 53, 53, 0.9);
+
+      &.active {
+        img {
+          border-left: 5px solid #A6D513;
+        }
+      }
+    }
+  }
+
+  &.with_home_button {
+    .navigation_bar_top {
+      height: 224px;
+    }
+
+    .scroller {
+      top: 224px;
+    }
+
+    .scroll_indicator.top {
+      top: 189px;
+    }
+  }
+
+  a.scroll_indicator {
+    $normal-offset: -14px;
+    $hover-offset: -115px;
+    $pressed-offset: -64px;
+
+    background-image: image-url("pageflow/themes/legacy/scroll_indicator_sprite.png");
+    background-repeat: no-repeat;
+    background-color: transparent;
+    width: 35px;
+    height: 30px;
+    right: 25px;
+    -webkit-mask-image: none;
+
+    &.top {
+      top: 145px;
+
+      $top-offset: -13px;
+      background-position: $top-offset $normal-offset;
+
+      @include hover {
+        background-position: $top-offset $hover-offset;
+      }
+
+      @include pressed {
+        background-position: $top-offset $pressed-offset;
+      }
+    }
+
+    &.bottom {
+      bottom: 234px;
+
+      $bottom-offset: -161px;
+      background-position: $bottom-offset $normal-offset;
+
+      @include hover {
+        background-position: $bottom-offset $hover-offset;
+      }
+
+      @include pressed {
+        background-position: $bottom-offset $pressed-offset;
+      }
+    }
+  }
+
+  .navigation_bar_bottom {
+    height: 268px;
+    bottom: 0;
+
+    & > li > a {
+      background-color: $bg-color;
+    }
+
+    .indicator {
+      background-color: $bg-color;
+    }
+
+    .fullscreen {
+      background-color: $bg-color;
+    }
+  }
+
+  .navigation_menu_box.navigation_volume_box .volume-control {
+    &:before, &:after {
+      background-image: image-url('pageflow/themes/legacy/volume_control_sprite.png');
+      position: absolute;
+      width: 19px;
+      height: 19px;
+      content: " ";
+      background-repeat: no-repeat;
+      top: 8px;
+    }
+
+    &:before {
+      background-position: left top;
+      left: 0;
+      left: 12px;
+    }
+    &:after {
+      right: 8px;
+      background-position: -21px top;
+      top: 8px;
+    }
+  }
+
+  .volume-control {
+    .volume-slider {
+      background-color: gray;
+    }
+
+    .volume-level {
+      background-color: #b4c552;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/legacy/navigation_mobile.scss

@@ -0,0 +1,52 @@
+// scss-lint:disable all
+
+.navigation_mobile {
+  font-family: sourcesanspro;
+
+  .menu {
+    background-image: image-url('pageflow/themes/legacy/menu_mobile_sprite3.png');
+
+    &.imprint {
+      background-image: image-url('pageflow/themes/legacy/menu_mobile_imprint.png');
+    }
+
+    &.sharing {
+      background-image: image-url('pageflow/themes/legacy/menu_mobile_sharing.png');
+    }
+  }
+
+  .wrapper {
+    a.active {
+      border-left: 5px solid #A6D513;
+    }
+    .credits {
+      color: grey;
+    }
+  }
+
+  .overview_mobile, .imprint_mobile, .sharing_mobile {
+    background-color: #232323;
+
+    .credits{
+      font-family: "sourcesanspro";
+
+      a {
+        color: #b4c552;
+
+        &:hover {
+          color: white;
+        }
+      }
+    }
+  }
+
+  &.active {
+    .sharing_mobile li > a {
+      color: white;
+
+      &:before {
+        background-image: image-url('pageflow/themes/legacy/mobile_sharing.png');
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/legacy/overview.scss

@@ -0,0 +1,50 @@
+// scss-lint:disable all
+
+.overview {
+  @import "pageflow/themes/default/overview/chapter_border_images";
+
+  font-family: sourcesanspro;
+
+  &:after {
+    background-color: black;
+  }
+
+  &.active:after {
+    opacity: 0.4;
+  }
+
+  .content {
+    color: #fff;
+
+    h2 {
+      font-size: 3em;
+    }
+
+    .ov_chapter {
+      .heading-4 {
+        font-weight: bold;
+        font-size: 1.1em;
+      }
+
+      .heading-5 {
+        font-size: 1em;
+        text-transform: uppercase;
+        font-weight: normal;
+      }
+
+      .ov_page {
+        border: 1px solid #505050;
+        color: #fff;
+
+        &.active {
+          border-color: #ddd;
+        }
+      }
+
+      .ov_page_description {
+        background-color: #5d6c0c;
+        border-right: 1px solid #505050;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/legacy/page.scss

@@ -0,0 +1,48 @@
+.js .page {
+  .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;
+  }
+}