sitespeed.io 32.2.0 → 33.0.0

package/lib/plugins/html/src/sass/light/components/chartistExtras.scss

@@ -0,0 +1,155 @@
+
+// chartist-plugin-tooltip
+.chartist-tooltip {
+  background: $color--blue;
+  color: white;
+}
+
+.chartist-tooltip:before {
+  border-top-color: $color--blue;
+}
+
+// chartist
+.ct-bar {
+ stroke-width: 16px;
+}
+
+.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
+  stroke: #82b5fc;
+}
+
+.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-donut-solid, .ct-series-a .ct-area {
+  fill: #468847;
+}
+
+
+.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
+  stroke: #b2ea94;
+}
+
+.ct-series-b .ct-slice-pie, .ct-series-b .ct-slice-donut-solid, .ct-series-b .ct-area {
+  fill: #c09853;
+}
+
+.ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut {
+  stroke: #fec584;
+}
+
+.ct-series-c .ct-slice-pie, .ct-series-c .ct-slice-donut-solid, .ct-series-c .ct-area {
+  fill: #b94a48;
+}
+
+.ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut {
+  stroke: #c49ae8;
+}
+
+.ct-series-d .ct-slice-pie, .ct-series-d .ct-slice-donut-solid, .ct-series-d .ct-area {
+  fill: #c49ae8;
+}
+
+.ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut {
+  stroke: #ff523e;
+}
+
+.ct-series-e .ct-slice-pie, .ct-series-e .ct-slice-donut-solid, .ct-series-e .ct-area {
+  fill: #ff523e;
+}
+
+.ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut {
+  stroke: #c4c4c4;
+}
+
+.ct-series-f .ct-slice-pie, .ct-series-f .ct-slice-donut-solid, .ct-series-f .ct-area {
+  fill: #c4c4c4;
+}
+
+.ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut {
+  stroke: #c4c4c4;
+}
+
+.ct-series-g .ct-slice-pie, .ct-series-g .ct-slice-donut-solid, .ct-series-g .ct-area {
+  fill: #c4c4c4;
+}
+
+.ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut {
+  stroke: #c4c4c4;
+}
+
+.ct-series-h .ct-slice-pie, .ct-series-h .ct-slice-donut-solid, .ct-series-h .ct-area {
+  fill: #c4c4c4;
+}
+
+.ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut {
+  stroke: #EAB839;
+}
+
+.ct-series-i .ct-slice-pie, .ct-series-i .ct-slice-donut-solid, .ct-series-i .ct-area {
+  fill: #EAB839;
+}
+
+.ct-chart {  
+  .ct-legend {      
+      position: relative;
+      z-index: 10;
+      list-style: none;
+      text-align: left;
+      line-height: 0.8;
+      font-size: 0.8em;
+
+      li {
+          padding-left: 23px;
+          margin-right: 10px;
+          margin-bottom: 3px;
+          cursor: pointer;
+
+          &:before {
+              width: 12px;
+              height: 12px;
+              position: absolute;
+              left: 0;
+              content: '';
+              border: 3px solid transparent;
+              border-radius: 2px;
+          }
+          .inactive:before {
+              background: transparent;
+          }
+
+          &:nth-child(1)::before{
+              background-color: #468847;
+          }    
+          
+          &:nth-child(2)::before{
+              background-color: #c09853;
+          }
+      
+          &:nth-child(3)::before{
+              background-color: #b94a48;
+          }
+      
+      }
+
+      .ct-legend-inside {
+          position: absolute;
+          top: 0;
+          right: 0;
+      }
+  }
+  g:not(.ct-grids):not(.ct-labels) g {
+      &:nth-child(1){
+          .ct-point,.ct-line {
+              stroke: #468847;        
+          }
+      }
+      &:nth-child(2){
+          .ct-point,.ct-line {
+              stroke: #c09853;      
+          }
+      }
+      &:nth-child(3){
+          .ct-point,.ct-line {
+              stroke: #b94a48;       
+          }
+      }
+  }
+}

package/lib/plugins/html/src/sass/light/components/filmstrip.scss

@@ -0,0 +1,32 @@
+
+.filmstrip {
+    padding-bottom: 20px;
+}
+
+.videoframe {
+    vertical-align: top;
+    display: inline-block;
+    padding: 4px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    width:100%;
+}
+
+.videoframe.blue {
+    border: 2px solid $color--blue;
+}
+
+.videoframetime {
+ text-align: center;
+ display: block;
+}
+
+.videoframetext {
+    text-align: left;
+    display: block;
+    line-height: 1.2em;
+    font-size: 0.8em;
+    white-space: nowrap;
+    margin-bottom: 0.2em;
+}

package/lib/plugins/html/src/sass/light/components/loader.scss

@@ -0,0 +1,59 @@
+.loader,
+.loader:before,
+.loader:after {
+  background: #000000;
+  -webkit-animation: load1 1s infinite ease-in-out;
+  animation: load1 1s infinite ease-in-out;
+  width: 1em;
+  height: 4em;
+}
+.loader {
+  color: #000000;
+  text-indent: -9999em;
+  margin: 88px auto;
+  position: relative;
+  font-size: 11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+.loader:before {
+  left: -1.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.loader:after {
+  left: 1.5em;
+}
+@-webkit-keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+@keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}

package/lib/plugins/html/src/sass/light/components/misc.scss

@@ -0,0 +1,74 @@
+//
+// MISC STYLES
+// ===============
+// This is styles to be sorted into components
+//
+
+/** Labels */
+
+.label {
+ display: inline;
+ padding: 0.2em 0.6em 0.3em;
+ font-size: 75%;
+ font-weight: bold;
+ line-height: 1;
+ color: #fff;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: baseline;
+ border-radius: 0.25em;
+}
+
+.normal {
+ font-size: 100%;
+}
+
+.ok {
+ background-color: #468847;
+}
+.warning {
+ background-color: #f0ad4e;
+}
+.error {
+ background-color: #d9534f;
+}
+
+.info {
+ background-color: $color--blue;
+}
+
+ul.menu {
+ list-style: none;
+ font-size: 125%;
+ text-transform: uppercase;
+}
+
+.errors {
+ margin-bottom: 1.333em;
+ background: lightpink;
+ padding-left: 1em;
+}
+
+.subtableheader {
+ background: #ffe3eb;
+}
+
+/* Large */
+
+.large {
+ font-size: 1.333rem;
+ line-height: 1.8rem;
+}
+
+.hidden-small {
+ display: inline;
+}
+
+.url {
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ -moz-hyphens: auto;
+ hyphens: auto;
+}

package/lib/plugins/html/src/sass/light/components/navigation.scss

@@ -0,0 +1,133 @@
+//
+// MAIN NAVIGATION
+// ===============
+//
+
+.navgrid {
+ width: 100%;
+ min-width: 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding-left: 0;
+ padding-right: 10px;
+}
+
+.nav {
+ background: $color--blue;
+ ul {
+  list-style: none;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  background-color: $color--blue;
+ }
+ li {
+  line-height: 40px;
+  height: 40px;
+  border-bottom: none;
+  margin-bottom: 0;
+ }
+ a {
+  text-decoration: none;
+  color: $color--white;
+  display: block;
+  &:hover {
+   background-color: #0073b0;
+  }
+  &.active {
+   background-color: #0073b0;
+   color: $color--white;
+   cursor: default;
+  }
+ }
+}
+
+.logo {
+ text-align: center;
+ background-color: $color--blue;
+}
+
+.navbar-brand {
+ padding: 0;
+ font-size: 18px;
+ max-width: 250px;
+}
+
+@media screen and (min-width: 820px) {
+ body {
+  padding-top: 50px;
+ }
+ .navgrid {
+  width: 100%;
+  max-width: 1140px;
+  min-width: 755px;
+  margin: 0 auto;
+  overflow: hidden;
+ }
+ .nav {
+  height: 50px;
+  width: 100%;
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+ }
+ .navbar-brand {
+  padding: 0;
+  font-size: 18px;
+  float: left;
+  max-width: 250px;
+ }
+ .nav {
+  a {
+   padding-left: 20px;
+   padding-right: 20px;
+  }
+  z-index: 10;
+  top: 0;
+  background-color: $color--blue;
+  li {
+   border-bottom: none;
+   height: 50px;
+   line-height: 50px;
+   float: left;
+   display: inline-block;
+   margin-right: 0;
+  }
+  a {
+   text-decoration: none;
+   color: $color--white;
+   display: block;
+  }
+  ul {
+   list-style: none;
+   text-align: center;
+   padding: 0;
+   margin: 0;
+   background-color: $color--blue;
+  }
+ }
+
+ /* Fix for fixed navigation and links */
+ :target:before {
+  content: "";
+  display: block;
+  height: 50px; /* fixed header height*/
+  margin: -50px 0 0; /* negative fixed header height */
+ }
+}
+
+@media (min-width: 1550px) {
+ .nav {
+  li {
+   font-size: 1.2em;
+  }
+ }
+}
+
+@media (min-width: 1900px) {
+ .nav {
+  li {
+   font-size: 1.4em;
+  }
+ }
+}

package/lib/plugins/html/src/sass/light/components/screenshot.scss

@@ -0,0 +1,11 @@
+//
+// Screenshots
+// ===============
+//
+
+.screenshot {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}

package/lib/plugins/html/src/sass/light/components/waterfallExtras.scss

@@ -0,0 +1,73 @@
+.water-fall-chart .type-firstpaint .line-holder {
+ stroke: #42f46e;
+ stroke-opacity: 1;
+ stroke-width: 3;
+}
+.water-fall-chart .type-firstvisualchange .line-holder {
+ stroke: #42f46e;
+ stroke-opacity: 1;
+ stroke-width: 3;
+}
+.water-fall-chart .type-visualcomplete85 .line-holder {
+ stroke: #ee7777;
+ stroke-opacity: 1;
+ stroke-width: 3;
+}
+.water-fall-chart .type-lastvisualchange .line-holder {
+ stroke: #ee42f4;
+ stroke-opacity: 1;
+ stroke-width: 3;
+}
+.water-fall-chart .type-onload .line-holder {
+ stroke: #9c99e5;
+ stroke-opacity: 1;
+ stroke-width: 3;
+}
+.water-fall-chart .type-oncontentload .line-holder {
+ stroke: #9842f4;
+ stroke-opacity: 1;
+ stroke-width: 3;
+}
+.water-fall-chart .type-dominteractivetime .line-holder {
+ stroke: #1842f4;
+ stroke-opacity: 1;
+ stroke-width: 2;
+}
+.water-fall-chart .type-domcontentloadedtime .line-holder {
+ stroke: #1212f4;
+ stroke-opacity: 1;
+ stroke-width: 2;
+}
+
+.water-fall-chart .type-lastcpulongtask .line-holder {
+    stroke: #f41229;
+    stroke-opacity: 1;
+    stroke-width: 3;
+}
+
+.water-fall-chart .type-largestcontentfulpaint .line-holder {
+    stroke: #c7f412;
+    stroke-opacity: 1;
+    stroke-width: 3;
+}
+
+.water-fall-chart {
+ font-size: 14px;
+}
+
+
+#page-selector {
+ display: none;
+ clear: both;
+ margin: 1em 0;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+@media screen and (max-width: 400px) {
+ select {
+  max-width: 100%;
+ }
+}

package/lib/plugins/html/src/sass/light/foundations/base.scss

@@ -0,0 +1,66 @@
+//
+// BASE STYLES
+// ===============
+//
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+//
+// LISTS
+//
+
+ul,
+ol {
+ margin-bottom: 2.5rem;
+}
+
+ul {
+ margin-top: 0;
+ padding-left: 0;
+ list-style: circle inside;
+
+ ul,
+ ol {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 0.9rem;
+ }
+}
+
+ol {
+ margin-top: 0;
+ padding-left: 0;
+ list-style: decimal inside;
+
+ ol,
+ ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 0.9rem;
+ }
+}
+
+li {
+ margin-bottom: 0rem;
+}
+
+//
+// MISC
+//
+
+figure {
+ margin-bottom: 2.5rem;
+}
+
+footer {
+ text-align: center;
+}
+
+hr {
+ margin-top: 3rem;
+ margin-bottom: 3.5rem;
+ border-width: 0;
+ border-top: 1px solid $color--grey;
+}