|
|
@@ -0,0 +1,394 @@
|
|
|
+
|
|
|
+/* Timeline colors, related to Window Performances */
|
|
|
+@domCreationColor: #FF6600;
|
|
|
+@domCreationBg: #FFE0CC;
|
|
|
+@domContentLoadedColor: #A7E846;
|
|
|
+@domContentLoadedBg: #E0FFD1;
|
|
|
+@domContentLoadedEndColor: #7ECCCC;
|
|
|
+@domContentLoadedEndBg: #D8F0F0;
|
|
|
+@domCompleteColor: #C2A3FF;
|
|
|
+@domCompleteBg: #EDE3FF;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.resultsMenu {
|
|
|
+ margin-top: 2em;
|
|
|
+}
|
|
|
+
|
|
|
+.resultsMenu .menuItem {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 1em;
|
|
|
+ width: 8em;
|
|
|
+ height: 7em;
|
|
|
+ color: #fff;
|
|
|
+ border: 3px solid #fff;
|
|
|
+ border-radius: 0.5em;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+.resultsMenu .back {
|
|
|
+ color: #5e2846;
|
|
|
+ border-color: #5e2846;
|
|
|
+}
|
|
|
+.resultsMenu .menuItem div {
|
|
|
+ padding-top: 0.5em;
|
|
|
+ font-size: 3em;
|
|
|
+}
|
|
|
+.resultsMenu .active, .resultsMenu .menuItem.active:hover {
|
|
|
+ color: #ffa319;
|
|
|
+ border-color: #ffa319;
|
|
|
+}
|
|
|
+.resultsMenu .menuItem:hover {
|
|
|
+ color: #ffa319;
|
|
|
+}
|
|
|
+
|
|
|
+.resultsMenu span {
|
|
|
+ position: relative;
|
|
|
+ top: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+.testedUrl {
|
|
|
+ color: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+h4 {
|
|
|
+ margin-bottom: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+.summary, .metrics, .execution {
|
|
|
+ margin-top: 2em;
|
|
|
+ padding: 1em;
|
|
|
+ background: #fff;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 0.5em;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.notations {
|
|
|
+ display: table;
|
|
|
+ width: 40em;
|
|
|
+ margin-left: 6em;
|
|
|
+ border-spacing: 0.5em;
|
|
|
+}
|
|
|
+@media screen and (max-width: 800px) {
|
|
|
+ .notations {
|
|
|
+ width: 30em;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.notations > div {
|
|
|
+ display: table-row;
|
|
|
+}
|
|
|
+.notations > div > div {
|
|
|
+ display: table-cell;
|
|
|
+ height: 2.5em;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.notations .notation {
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.notations .criteria {
|
|
|
+ padding-top: 0.9em;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+.notations .A, .notations .B, .notations .C, .notations .D, .notations .E, .notations .F, .notations .NA {
|
|
|
+ width: 2.5em;
|
|
|
+ font-size: 2em;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 0.5em;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.notations .A {
|
|
|
+ /* green */
|
|
|
+ background: #00DB61;
|
|
|
+}
|
|
|
+.notations .B {
|
|
|
+ /* green */
|
|
|
+ background: #CAD63D;
|
|
|
+}
|
|
|
+.notations .C {
|
|
|
+ /* yellow */
|
|
|
+ background: #FFD119;
|
|
|
+}
|
|
|
+.notations .D {
|
|
|
+ /* orange */
|
|
|
+ background: #FFA319;
|
|
|
+}
|
|
|
+.notations .E {
|
|
|
+ /* red */
|
|
|
+ background: #FF6600;
|
|
|
+}
|
|
|
+.notations .F {
|
|
|
+ /* red */
|
|
|
+ background: #FF1919;
|
|
|
+}
|
|
|
+.notations .NA {
|
|
|
+ /* Non applicable */
|
|
|
+ background: #CCC;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline {
|
|
|
+ margin: 2em 0 5em;
|
|
|
+}
|
|
|
+.timeline .chart {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+}
|
|
|
+.timeline .startTime, .timeline .endTime {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0.5em;
|
|
|
+ font-size: 0.8em;
|
|
|
+}
|
|
|
+.timeline .startTime {
|
|
|
+ left: 0em;
|
|
|
+}
|
|
|
+.timeline .endTime {
|
|
|
+ right: 0em;
|
|
|
+}
|
|
|
+.timeline .chartPoints {
|
|
|
+ display: table;
|
|
|
+ height: 100px;
|
|
|
+ width: 99%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.timeline .interval {
|
|
|
+ display: table-cell;
|
|
|
+ position: relative;
|
|
|
+ height: 100px;
|
|
|
+ width: 0.5%;
|
|
|
+}
|
|
|
+.timeline .interval .color {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.timeline div.interval:hover {
|
|
|
+ background: #9C4274;
|
|
|
+}
|
|
|
+.timeline .interval:hover .color {
|
|
|
+ background: #F04DA7;
|
|
|
+}
|
|
|
+.timeline .domComplete.interval {
|
|
|
+ background: @domCompleteBg;
|
|
|
+}
|
|
|
+.timeline .domComplete .color {
|
|
|
+ background: @domCompleteColor;
|
|
|
+}
|
|
|
+.timeline .domContentLoadedEnd.interval {
|
|
|
+ background: @domContentLoadedEndBg;
|
|
|
+}
|
|
|
+.timeline .domContentLoadedEnd .color {
|
|
|
+ background: @domContentLoadedEndColor;
|
|
|
+}
|
|
|
+.timeline .domContentLoaded.interval {
|
|
|
+ background: @domContentLoadedBg;
|
|
|
+}
|
|
|
+.timeline .domContentLoaded .color {
|
|
|
+ background: @domContentLoadedColor;
|
|
|
+}
|
|
|
+.timeline .domCreation.interval {
|
|
|
+ background: @domCreationBg;
|
|
|
+}
|
|
|
+.timeline .domCreation .color {
|
|
|
+ background: @domCreationColor;
|
|
|
+}
|
|
|
+.timeline .tooltip.detailsOverlay {
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ width: auto;
|
|
|
+ padding: 0.5em 1em;
|
|
|
+ top: 1em;
|
|
|
+ right: 1em;
|
|
|
+}
|
|
|
+.timeline .interval:hover .tooltip {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.timeline .legend {
|
|
|
+ display: table;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 1em;
|
|
|
+}
|
|
|
+.timeline .legend > div {
|
|
|
+ display: table-row;
|
|
|
+}
|
|
|
+.timeline .legend > div > div {
|
|
|
+ display: table-cell;
|
|
|
+ margin-top: 1em;
|
|
|
+}
|
|
|
+.timeline .titles {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.timeline .tips {
|
|
|
+ font-size: 0.7em;
|
|
|
+}
|
|
|
+.timeline .tips > div {
|
|
|
+ padding: 1em 1.5em;
|
|
|
+}
|
|
|
+.timeline .legend .color {
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ top: 0.4em;
|
|
|
+ height: 1.5em;
|
|
|
+ width: 1.5em;
|
|
|
+ border-radius: 0.2em;
|
|
|
+ margin: 0 0.4em 0 1em;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.metrics h4 {
|
|
|
+ padding-left: 2em;
|
|
|
+}
|
|
|
+
|
|
|
+.metrics .module {
|
|
|
+ padding-left: 4em;
|
|
|
+ padding-top: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+.metrics .legend {
|
|
|
+ font-style: italic;
|
|
|
+ color: #aaa;
|
|
|
+}
|
|
|
+
|
|
|
+.metrics .offenders {
|
|
|
+ padding-left: 0em;
|
|
|
+ font-size: 0.8em;
|
|
|
+}
|
|
|
+
|
|
|
+.metrics .offenders div {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.metrics .offenders ul {
|
|
|
+ margin-top: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+.filters {
|
|
|
+ margin: 1em 0;
|
|
|
+ padding: 0.5em;
|
|
|
+ border: 1px dotted #aaa;
|
|
|
+}
|
|
|
+
|
|
|
+.slowRequestsLimit {
|
|
|
+ width: 3em;
|
|
|
+ font-size: 1em;
|
|
|
+ text-align: right;
|
|
|
+ border: 1px solid #aaa;
|
|
|
+}
|
|
|
+
|
|
|
+input.textFilter {
|
|
|
+ box-shadow: none;
|
|
|
+ font-size: 1em;
|
|
|
+ padding: 0 0.2em;
|
|
|
+ border: 1px solid #aaa;
|
|
|
+ border-radius: none;
|
|
|
+ width: 15em;
|
|
|
+}
|
|
|
+
|
|
|
+.table {
|
|
|
+ display: table;
|
|
|
+ width: 100%;
|
|
|
+ border-spacing: 0.25em;
|
|
|
+}
|
|
|
+
|
|
|
+.table > div {
|
|
|
+ display: table-row;
|
|
|
+}
|
|
|
+
|
|
|
+.table > .headers > div {
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0.5em 1em;
|
|
|
+}
|
|
|
+
|
|
|
+.table > div > div {
|
|
|
+ padding: 0.1em 1em;
|
|
|
+ background: #f2f2f2;
|
|
|
+ display: table-cell;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.table > div.jsError > .type, .table > div.jsError > .value {
|
|
|
+ color: #e74c3c;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.table > div.windowPerformance > div {
|
|
|
+ background: #EBD8E2;
|
|
|
+}
|
|
|
+.table > div.showingDetails > div {
|
|
|
+ background: #f1c40f;
|
|
|
+}
|
|
|
+
|
|
|
+.table > div > .index {
|
|
|
+ color: #bbb;
|
|
|
+}
|
|
|
+
|
|
|
+.table > div > .type {
|
|
|
+ white-space:nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.table > div > .value {
|
|
|
+ width: 70%;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.table > div > .details {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.table .details .icon-question {
|
|
|
+ color: #f1c40f;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.detailsOverlay {
|
|
|
+ position: absolute;
|
|
|
+ right: 3em;
|
|
|
+ top: -3em;
|
|
|
+ width: 45em;
|
|
|
+ min-height: 1em;
|
|
|
+ padding: 0 1em 1em;
|
|
|
+ background: #fff;
|
|
|
+ border: 2px solid #f1c40f;
|
|
|
+ border-radius: 0.5em;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+@media screen and (max-width: 1024px) {
|
|
|
+ .detailsOverlay {
|
|
|
+ width: 25em;
|
|
|
+ }
|
|
|
+}
|
|
|
+.detailsOverlay .closeBtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0.5em;
|
|
|
+ right: 0.5em;
|
|
|
+ color: #f1c40f;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.detailsOverlay .advice {
|
|
|
+ color: #e74c3c;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.detailsOverlay .trace {
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.table > div > .duration, .table > div > .startTime {
|
|
|
+ text-align: center;
|
|
|
+ white-space:nowrap;
|
|
|
+}
|
|
|
+.table > div > .startTime.domComplete {
|
|
|
+ background: @domCompleteBg;
|
|
|
+}
|
|
|
+.table > div > .startTime.domContentLoadedEnd {
|
|
|
+ background: @domContentLoadedEndBg;
|
|
|
+}
|
|
|
+.table > div > .startTime.domContentLoaded {
|
|
|
+ background: @domContentLoadedBg;
|
|
|
+}
|
|
|
+.table > div > .startTime.domCreation {
|
|
|
+ background: @domCreationBg;
|
|
|
+}
|
|
|
+
|
|
|
+.table .icon-warning {
|
|
|
+ color: #e74c3c;
|
|
|
+}
|
Gaël Métais