pageflow 0.1.0 → 0.2.0

data/app/assets/stylesheets/pageflow/mixins/label.css.scss

@@ -0,0 +1,5 @@
+@mixin label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

data/app/assets/stylesheets/pageflow/themes/default.css.scss

@@ -19,6 +19,16 @@ $addInfobox-border-color: #505050;
 $standard-font: SourceSansPro;
 $standard-font-size: 16px;
 
+@mixin shine-gradient {
+  background: #ffffff; /* Old browsers */
+  background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(29%,rgba(0,0,0,0.1)), color-stop(90%,rgba(0,0,0,0.05)), color-stop(100%,rgba(246,246,246,0.1))); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* IE10+ */
+  background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(0, 0, 0, 0.1) 29%,rgba(0,0,0,0.05) 90%,rgba(246,246,246,0.1) 100%); /* W3C */
+}
+
 @import "bourbon";
 @import "pageflow/mixins";
 @import "pageflow/animations";
@@ -28,3 +38,4 @@ $standard-font-size: 16px;
 @import "./default/page";
 @import "./default/navigation";
 @import "./default/overview";
+@import "./default/player_controls";

data/app/assets/stylesheets/pageflow/themes/default/anchors.css.scss

@@ -20,22 +20,17 @@ $anchor-color: $main-color;
     margin-right: 5px;
   }
 
+  @include fa-caret-right-icon;
+
   &:before {
-    left: -16px;
     top: 7px;
-    position: absolute;
-    background-image: image-url('pageflow/anchor_white.png');
     width: 10px;
     height: 12px;
-    content: "";
     display: inline-block;
     background-repeat: no-repeat;
     background-position: center;
 
-
     @include phone {
-      left: -12px;
-      top: 3px;
     }
   }
 }
@@ -59,6 +54,6 @@ $anchor-color: $main-color;
 
   &:hover {
     text-decoration: underline;
-    color: $anchor_color;
+    color: $anchor-color;
   }
 }

data/app/assets/stylesheets/pageflow/themes/default/loading_spinner.css.scss

@@ -12,18 +12,33 @@
     margin-left: -102px;
     margin-top: -101px;
     position: absolute;
+    z-index: 0;
+    background-color: $main-color;
+    animation: fadeInLoadingSpinner  linear 2s;
+    animation-iteration-count: 1;
+    -webkit-animation: fadeInLoadingSpinner linear 2s;
+    -webkit-animation-iteration-count: 1;
+    -moz-animation: fadeInLoadingSpinner linear 2s;
+    -moz-animation-iteration-count: 1;
+    -o-animation: fadeInLoadingSpinner linear 2s;
+    -o-animation-iteration-count: 1;
+    -ms-animation: fadeInLoadingSpinner linear 2s;
+    -ms-animation-iteration-count: 1;
 
     &:before {
       content: " ";
-      width: 204px;
-      height: 202px;
+      width: 208px;
+      height: 208px;
       position: absolute;
       background-image: image-url('pageflow/themes/#{$theme-name}/loading_spinner_bg.png');
+      z-index: 1;
+      top:-2px;
+      left: -2px;
     }
 
     div {
       width: 204px;
-      height: 202px;
+      height: 204px;
       position: absolute;
       background-image: image-url('pageflow/themes/#{$theme-name}/loading_spinner.png');
       @include animation-duration (1.5s);
@@ -34,6 +49,66 @@
   }
 }
 
+@keyframes fadeInLoadingSpinner {
+  0% {
+    opacity:0;
+  }
+  48% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-moz-keyframes fadeInLoadingSpinner {
+  0% {
+    opacity:0;
+  }
+  48% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-webkit-keyframes fadeInLoadingSpinner {
+  0% {
+    opacity:0;
+  }
+  48% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-o-keyframes fadeInLoadingSpinner {
+  0% {
+    opacity:0;
+  }
+  48% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-ms-keyframes fadeInLoadingSpinner {
+  0% {
+    opacity:0;
+  }
+  48% {
+    opacity:0;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
 @include keyframes(rotateSpinner) {
   from {
     @include transform(rotate(0deg));
@@ -45,15 +120,27 @@
 
   .js .vjs-default-skin {
     .vjs-loading-spinner {
-      top: 29px;
-      left: 30px;
+      top: 8px;
+      left: 10px;
       opacity: 1;
-      margin-left: -39px;
-      margin-top: -39px;
+      width: 43px;
+      height: 43px;
+      margin-left: 0;
+      margin-top: 0;
+
+      @include fa-gear-icon;
+
+      @include phone {
+      }
 
       &:before {
-        content: " ";
-        background-image: image-url('pageflow/themes/#{$theme-name}/loading_small.png');
+        width: 43px;
+        height: 43px;
+        top: 0;
+        left: 0;
+        font-size: 43px;
+        color: $main-color;
+        background-image: none;
       }
     }
   }

data/app/assets/stylesheets/pageflow/themes/default/navigation.css.scss

@@ -8,232 +8,161 @@ $nav-bg-color-transparent: $basic-background-color-transparent;
 
 
 .navigation {
-  .button, .navigation_mute, .navigation_share {
-    background-image: image-url("pageflow/themes/#{$theme-name}/menu_sprite.png");
-    height: 42px;
-    width: 42px;
-  }
-
-  $normalOffset: -30px;
-  $mousedownOffset: -140px;
-  $hoverOffset: -85px;
-  $deactiveOffset: -195px;
 
-  .navigation_main {
-    $main: -22px;
-    .button {
-      background-position: $main $normalOffset;
-
-      @include hover {
-        background-position: $main $hoverOffset;
-      }
-
-      @include pressed {
-        background-position: $main $mousedownOffset;
-      }
+  .navigation_bullet, .navigation_menu > a {
+    font-size: 16px;
+    width: 28px;
+    height: 28px;
+    display: block;
+    background: -webkit-linear-gradient(-75deg, rgba(255, 255, 255, 0.71), rgba(0, 0, 0, 0.32));
+    background-color: #03818c !important;
+    box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.2);
+    border-radius: 18px;
+    color: rgba(255,255,255,0.8);
+    cursor: pointer;
+    margin: 13px 28px;
+    position: relative;
+    background-color: rgb(219, 219, 219) !important;
+    @include shine-gradient;
+
+    &:hover, &.active {
+        background-color: $nav-color !important;
+        -webkit-mask-image: none;
+
+        .button, .navigation_mute, .navigation_share {
+          color: rgba(255,255,255,0.9);
+          text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+        }
     }
-    &.active .button {
-      $mainActive: -89px;
-      background-position: $mainActive $normalOffset;
-
-      @include hover {
-        background-position: $mainActive $hoverOffset;
-      }
-
-      @include pressed {
-        background-position: $mainActive $mousedownOffset;
-      }
+    &:active {
+      box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2);
+      -webkit-transform: translate(1px,1px);
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.2) 100%);
     }
   }
 
-  $home: -155px;
-  .navigation_home .button {
-    background-position: $home $normalOffset;
-
-    @include hover {
-      background-position: $home $hoverOffset;
-    }
-
-    @include pressed {
-      background-position: $home $mousedownOffset;
-    }
-  }
-  .navigation_home.deactivated .button {
-    @include hover {
-      background-position: $home $deactiveOffset;
-    }
-    background-position: $home $deactiveOffset;
+  .button, .navigation_mute, .navigation_share {
+    font-family: "FontAwesome";
+    font-size: 1em;
+    color: rgba(0,0,0,0.75);
+    text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.6);
+    margin: 1px 0px 0px 0px !important;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    line-height: 28px;
+    border-bottom: 0px !important;
 
-    cursor: default;
   }
 
-  .navigation_index {
-    $index: -222px;
+  .navigation_bullet.navigation_home {
+    padding-top: 0;
     .button {
-      background-position: $index $normalOffset;
+      border-bottom: 0;
+      font-weight: bold;
 
-      @include hover {
-        background-position: $index $hoverOffset;
-      }
-
-      @include pressed {
-        background-position: $index $mousedownOffset;
-      }
-    }
-
-    &.active .button {
-      background-position: $index $hoverOffset;
-
-      @include pressed {
-        background-position: $index $mousedownOffset;
-      }
+      @include fa-home-icon;
     }
   }
-  $fullscreen: -289px;
-  .navigation_fullscreen .button {
-    background-position: $fullscreen $normalOffset;
-
-    @include hover {
-      background-position: $fullscreen $hoverOffset;
-    }
-
-    @include pressed {
-      background-position: $fullscreen $mousedownOffset;
+  .navigation_bullet.navigation_index {
+    .button {
+      @include fa-th-icon;
     }
   }
-  .navigation_fullscreen.active .button {
-    background-position: $fullscreen $hoverOffset;
 
-    @include pressed {
-      background-position: $fullscreen $mousedownOffset;
-    }
+  &.js .navigation_bar_bottom li.fullscreen {
+    height: auto;
   }
 
-  $hide_text: -670px;
-  .navigation_hide_text .button {
-    background-position: $hide_text $normalOffset;
+  &.js a.scroll_indicator {
+    background-image: image-url('pageflow/themes/default/scroll_indicator_sprite.png');
+  }
 
-    @include hover {
-      background-position: $hide_text $hoverOffset;
-    }
+  .navigation_bullet.navigation_fullscreen {
 
-    @include pressed {
-      background-position: $hide_text -141px;
+    .button {
+      font-weight: bold;
+      @include fa-expand-icon;
     }
   }
-  .navigation_hide_text.active .button {
-    background-position: $hide_text $hoverOffset;
+  .navigation_bullet.navigation_hide_text {
+    .button {
+      font-weight: bold;
 
-    @include pressed {
-      background-position: $hide_text -141px;
+      @include fa-photo-icon;
     }
   }
+  .navigation_menu {
+    .navigation_mute {
+      font-weight: bold;
 
-  .navigation_mute {
-    background-position: -355px $normalOffset;
-  }
-  .navigation_mute.muted {
-    background-position: -489px $normalOffset;
-  }
-  .navigation_volume_box {
-    @include hover {
-      + a .navigation_mute {
-        background-position: -355px $hoverOffset;
+      @include fa-volume-up-icon;
+
+      &.muted {
+        @include fa-volume-off-icon;
+      }
+      &.muted:before {
+        margin-right: 2px;
       }
     }
   }
-  .navigation_volume_box {
-    @include hover {
-      + a .navigation_mute.muted {
-        background-position: -489px $hoverOffset;
+  .navigation_menu {
+    .navigation_share {
+      font-weight: bold;
+
+      @include fa-share-icon;
+
+      &:before {
+        margin-left: 1px;
       }
     }
   }
-  .navigation_share {
-    background-position: -555px $normalOffset;
-  }
-  .navigation_share_box {
-    @include hover {
-      + a .navigation_share {
-        background-position: -555px $hoverOffset;
-      }
+  .navigation_menu {
+    .navigation_credits {
+      font-weight: bold;
+      @include fa-info-icon;
     }
   }
-  .navigation_credits.button {
-    $credits: -622px;
-    background-position: $credits $normalOffset;
 
-    @include hover {
-      background-position: $credits $hoverOffset;
+  .navigation_share_box {
+    a {
+      text-align: center;
+
+      p {
+        font-family: SourceSansPro;
+        font-size: 12px;
+      }
     }
 
-    @include pressed {
-      background-position: $credits -141px;
+    .share_google, .share_facebook, .share_twitter {
+      font-size: 1.5em;
+      &:before {
+        font-family: "FontAwesome";
+        color: white;
+        text-shadow: none;
+      }
     }
-  }
-  .share_google {
-    background-position: -855px -39px;
-  }
-  .share_twitter {
-    background-position: -789px -39px;
-  }
-  .share_facebook {
-    background-position: -718px -39px;
-  }
 
-  a {
-    .navigation_mute {
-      @include pressed {
-        background-position: -355px $mousedownOffset;
+    a:hover {
+      p {
+        color: $nav-color;
       }
 
-      &.muted {
-        @include pressed {
-          background-position: -489px $mousedownOffset;
+      .share_google, .share_facebook, .share_twitter {
+        &:before {
+          color: $nav-color;
         }
       }
     }
-    .navigation_share {
-      @include pressed {
-        background-position: -555px $mousedownOffset;
-      }
-    }
+
     .share_google {
-      @include pressed {
-        background-position: -855px -145px;
-      }
-    }
-    .share_twitter {
-      @include pressed {
-        background-position: -789px -145px;
-      }
+      @include fa-google-plus-icon;
     }
     .share_facebook {
-      @include pressed {
-        background-position: -718px -145px;
-      }
+      @include fa-facebook-icon;
     }
-
-    @include hover {
-      .navigation_mute {
-        background-position: -355px $hoverOffset;
-
-        &.muted {
-          background-position: -489px $hoverOffset;
-        }
-      }
-      .navigation_share {
-        background-position: -555px $hoverOffset;
-      }
-      .share_google {
-        background-position: -855px -92px;
-      }
-      .share_twitter {
-        background-position: -789px -92px;
-      }
-      .share_facebook {
-        background-position: -718px -92px;
-      }
+    .share_twitter {
+      @include fa-twitter-icon;
     }
   }
 }
@@ -281,11 +210,16 @@ $nav-bg-color-transparent: $basic-background-color-transparent;
 }
 
 .overview_mobile .credits a:before, .navigation_credits_box a:before {
-  background-image: image-url('pageflow/themes/#{$theme-name}/anchor_main_color.png');
+  background-image: none;
+  top: 1px;
 }
 
 .navigation .navigation_home.deactivated .button {
-  background-position: -155px -140px
+  background-position: -155px -140px;
+}
+
+.navigation .navigation_home.deactivated {
+  pointer-events: none;
 }
 
 div.navigation > ul.navigation_bar_top > li:nth-child(1) {
@@ -318,6 +252,17 @@ div.navigation .menu_li {
   background-color: $nav-bg-color;
 }
 .navigation .scroller ul a, .navigation.js .scroller ul a {
-  background-color: $nav-bg-color;
-  background-color: $nav-bg-color-transparent;
+  background-color: transparent;
+
+  &:after {
+    content: "";
+    background-color: $nav-bg-color;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    position: absolute;
+    z-index: -1;
+    left: 0;
+    opacity: 0.9;
+  }
 }