773 lines
14 KiB
CSS
773 lines
14 KiB
CSS
/* Timeline colors, related to Window Performances */
|
|
.execution {
|
|
text-align: center;
|
|
}
|
|
.selectScript {
|
|
padding-bottom: 2em;
|
|
font-size: 0.9em;
|
|
}
|
|
.selectScript select {
|
|
max-width: 30em;
|
|
}
|
|
.selectScript.empty {
|
|
font-size: 0.8em;
|
|
}
|
|
.selectScript.empty select {
|
|
width: 10em;
|
|
}
|
|
.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 .interval .color.clickable {
|
|
cursor: pointer;
|
|
}
|
|
.timeline div.interval:hover {
|
|
background: #9C4274;
|
|
}
|
|
.timeline .interval:hover .color {
|
|
background: #F04DA7;
|
|
}
|
|
.timeline .domComplete.interval {
|
|
background: #ede3ff;
|
|
}
|
|
.timeline .domComplete .color {
|
|
background: #c2a3ff;
|
|
}
|
|
.timeline .domContentLoadedEnd.interval {
|
|
background: #d8f0f0;
|
|
}
|
|
.timeline .domContentLoadedEnd .color {
|
|
background: #7ecccc;
|
|
}
|
|
.timeline .domContentLoaded.interval {
|
|
background: #e0ffd1;
|
|
}
|
|
.timeline .domContentLoaded .color {
|
|
background: #a7e846;
|
|
}
|
|
.timeline .domInteractive.interval {
|
|
background: #fffccc;
|
|
}
|
|
.timeline .domInteractive .color {
|
|
background: #ffe433;
|
|
}
|
|
.timeline .domCreation.interval {
|
|
background: #ffe0cc;
|
|
}
|
|
.timeline .domCreation .color {
|
|
background: #ff6600;
|
|
}
|
|
.timeline .tooltip.detailsOverlay {
|
|
position: absolute;
|
|
display: none;
|
|
width: auto;
|
|
padding: 0.5em 1em;
|
|
top: -1.5em;
|
|
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 {
|
|
position: relative;
|
|
display: table-cell;
|
|
margin-top: 1em;
|
|
}
|
|
.timeline .titles {
|
|
font-weight: bold;
|
|
}
|
|
.timeline .titles > div {
|
|
padding: 0 1em 0 2em;
|
|
}
|
|
.timeline .tips {
|
|
font-size: 0.7em;
|
|
}
|
|
.timeline .tips > div {
|
|
padding: 1em 1em 0 0;
|
|
}
|
|
.timeline .legend .color {
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
border-radius: 0.2em;
|
|
}
|
|
.filters {
|
|
margin: 1em auto;
|
|
padding: 0.5em;
|
|
min-width: 30em;
|
|
width: 30%;
|
|
border: 1px dotted #aaa;
|
|
text-align: left;
|
|
}
|
|
.subFilters {
|
|
margin-left: 3em;
|
|
font-size: 0.9em;
|
|
}
|
|
.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,
|
|
.table > div.windowPerformance > div.startTime {
|
|
background: #EBD8E2;
|
|
}
|
|
.table > div.showingDetails > div {
|
|
background: #f1c40f;
|
|
}
|
|
.table > div.highlight > div.startTime {
|
|
background-color: #C0F090;
|
|
}
|
|
.table > div.highlight-remove {
|
|
transition: 3s;
|
|
}
|
|
.table > div.highlight-remove > div.startTime {
|
|
transition: background-color 3s ease-in;
|
|
}
|
|
.table > div > .index {
|
|
color: #bbb;
|
|
word-break: normal;
|
|
}
|
|
.table > div > .type {
|
|
white-space: nowrap;
|
|
}
|
|
.table .children {
|
|
margin-top: 0.2em;
|
|
font-size: 0.8em;
|
|
line-height: 1.6em;
|
|
}
|
|
.table .child {
|
|
margin-left: 0.5em;
|
|
}
|
|
.table .child > .child {
|
|
margin-left: 1em;
|
|
}
|
|
.table .child:before {
|
|
content: "↳";
|
|
}
|
|
.table .child .childArgs {
|
|
display: none;
|
|
}
|
|
.table .child span {
|
|
position: relative;
|
|
}
|
|
.table .child span:hover {
|
|
background: #EBD8E2;
|
|
}
|
|
.table .child span:hover div {
|
|
display: inline-block;
|
|
}
|
|
.table .child span:hover .childArgs {
|
|
display: block;
|
|
position: absolute;
|
|
padding: 0 1em 0 2em;
|
|
left: 100%;
|
|
top: 0;
|
|
background: #EBD8E2;
|
|
line-height: 1.3em;
|
|
height: 1.3em;
|
|
z-index: 2;
|
|
}
|
|
.table .showingDetails .child span:hover {
|
|
background: inherit;
|
|
}
|
|
.table .showingDetails .child span:hover .childArgs {
|
|
display: none;
|
|
}
|
|
.table > div > .value {
|
|
width: 70%;
|
|
word-break: break-all;
|
|
}
|
|
.table > div > .details {
|
|
position: relative;
|
|
}
|
|
.table .details .icon-question {
|
|
color: #f1c40f;
|
|
cursor: pointer;
|
|
}
|
|
.table .icon-warning {
|
|
display: inline-block;
|
|
width: 0.8em;
|
|
}
|
|
.detailsOverlay {
|
|
display: none;
|
|
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: 2;
|
|
}
|
|
@media screen and (max-width: 1024px) {
|
|
.detailsOverlay {
|
|
width: 25em;
|
|
}
|
|
}
|
|
.showDetails .detailsOverlay {
|
|
display: block;
|
|
}
|
|
.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: #ede3ff;
|
|
}
|
|
.table > div > .startTime.domContentLoadedEnd {
|
|
background: #d8f0f0;
|
|
}
|
|
.table > div > .startTime.domContentLoaded {
|
|
background: #e0ffd1;
|
|
}
|
|
.table > div > .startTime.domInteractive {
|
|
background: #fffccc;
|
|
}
|
|
.table > div > .startTime.domCreation {
|
|
background: #ffe0cc;
|
|
}
|
|
.execution .icon-warning {
|
|
color: #e74c3c;
|
|
cursor: pointer;
|
|
}
|
|
.queryWithoutResultsFilterOn > div {
|
|
display: none;
|
|
}
|
|
.queryWithoutResultsFilterOn > div.queryWithoutResults {
|
|
display: table-row;
|
|
}
|
|
.jQueryCallOnEmptyObjectFilterOn > div {
|
|
display: none;
|
|
}
|
|
.jQueryCallOnEmptyObjectFilterOn > div.jQueryCallOnEmptyObject {
|
|
display: table-row;
|
|
}
|
|
.eventNotDelegatedFilterOn > div {
|
|
display: none;
|
|
}
|
|
.eventNotDelegatedFilterOn > div.eventNotDelegated {
|
|
display: table-row;
|
|
}
|
|
.jsErrorFilterOn > div {
|
|
display: none;
|
|
}
|
|
.jsErrorFilterOn > div.jsError {
|
|
display: table-row;
|
|
}
|
|
.testedUrl {
|
|
color: inherit;
|
|
}
|
|
.summary {
|
|
text-align: center;
|
|
}
|
|
.summary .globalScore {
|
|
display: table;
|
|
width: 60%;
|
|
margin: 3em auto;
|
|
}
|
|
.summary .globalScore > div {
|
|
display: table-cell;
|
|
width: 50%;
|
|
vertical-align: middle;
|
|
}
|
|
.summary .globalScore .globalGrade {
|
|
margin: 0.5 auto;
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
line-height: 2.5em;
|
|
border-radius: 0.5em;
|
|
font-size: 3em;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
}
|
|
.summary .globalScore .on100 {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
margin: 0.5em 0 1em;
|
|
}
|
|
.summary .globalScore .screenshotWrapper:hover {
|
|
opacity: 0.75;
|
|
}
|
|
.summary .globalScore .screenshotWrapper:hover:after {
|
|
position: absolute;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
top: 0.7em;
|
|
left: 1.55em;
|
|
font-size: 3em;
|
|
color: #FFF;
|
|
background: #000;
|
|
border-radius: 0.2em;
|
|
text-align: center;
|
|
content: "+";
|
|
opacity: 0.85;
|
|
}
|
|
.summary .globalScore .screenshotWrapper.phone:hover:after {
|
|
top: 1.7em;
|
|
left: 0.64em;
|
|
}
|
|
.summary .globalScore .screenshotWrapper.tablet:hover:after {
|
|
top: 1.5em;
|
|
left: 0.9em;
|
|
}
|
|
.summary .notations {
|
|
display: table;
|
|
width: 80%;
|
|
margin: 0 10% 1.5em;
|
|
border-spacing: 1em;
|
|
}
|
|
.summary .notations > div {
|
|
display: table-row;
|
|
}
|
|
.summary .notations > div > div {
|
|
display: table-cell;
|
|
height: 2.5em;
|
|
vertical-align: middle;
|
|
}
|
|
.summary .notations .category {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
width: 20%;
|
|
}
|
|
.summary .notations .criteria {
|
|
font-weight: normal;
|
|
width: 75%;
|
|
}
|
|
.summary .notations .A.categoryScore,
|
|
.summary .notations .B.categoryScore,
|
|
.summary .notations .C.categoryScore,
|
|
.summary .notations .D.categoryScore,
|
|
.summary .notations .E.categoryScore,
|
|
.summary .notations .F.categoryScore,
|
|
.summary .notations .NA.categoryScore {
|
|
width: 2.5em;
|
|
max-width: 2.5em;
|
|
min-width: 2.5em;
|
|
font-size: 2em;
|
|
text-align: center;
|
|
border-radius: 0.5em;
|
|
font-weight: bold;
|
|
}
|
|
.summary .notations .grade .A,
|
|
.summary .notations .grade .B,
|
|
.summary .notations .grade .C,
|
|
.summary .notations .grade .D,
|
|
.summary .notations .grade .E,
|
|
.summary .notations .grade .F,
|
|
.summary .notations .grade .NA {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 1em;
|
|
color: transparent;
|
|
margin: 0 auto;
|
|
border-radius: 0.5em;
|
|
}
|
|
.summary .notations .criteria .table {
|
|
width: 100%;
|
|
}
|
|
.summary .notations .criteria .table > div:hover > div {
|
|
background: #EBD8E2;
|
|
cursor: pointer;
|
|
}
|
|
.summary .notations .criteria .table > div:hover > div.info {
|
|
background: #FFF;
|
|
}
|
|
.summary .notations .criteria .table > div:hover > div.info .icon-question {
|
|
color: #EBD8E2;
|
|
}
|
|
.summary .notations .criteria .grade {
|
|
width: 10%;
|
|
padding-left: 0.5em;
|
|
padding-right: 0.5em;
|
|
vertical-align: middle;
|
|
}
|
|
.summary .notations .criteria .label {
|
|
width: 70%;
|
|
}
|
|
.summary .notations .criteria .result {
|
|
width: 18%;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
.summary .notations .warning .label,
|
|
.summary .notations .warning .result,
|
|
.summary .notations .icon-warning {
|
|
color: #FF1919;
|
|
}
|
|
.summary .notations .criteria .info {
|
|
width: 2%;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
background: #FFF;
|
|
padding-left: 0.1em;
|
|
padding-right: 0.1em;
|
|
}
|
|
.summary .notations .criteria .icon-question {
|
|
color: transparent;
|
|
}
|
|
.summary .fromShare {
|
|
margin-bottom: 3em;
|
|
}
|
|
.summary .apiTip {
|
|
font-size: 0.8em;
|
|
margin-bottom: 4em;
|
|
color: #413;
|
|
}
|
|
.summary .apiTip a {
|
|
color: inherit;
|
|
}
|
|
.summary .tweet .tweetText {
|
|
color: #413;
|
|
background: #F2F2F2;
|
|
border: none;
|
|
width: 25em;
|
|
padding: 0.4em;
|
|
border-radius: 0.5em;
|
|
box-shadow: 0.05em 0.1em 0 0 #999;
|
|
}
|
|
.summary .tweet .tweetButton,
|
|
.summary .tweet .linkedinButton {
|
|
color: #413;
|
|
background: #F2F2F2;
|
|
margin-right: 0;
|
|
}
|
|
.summary .tweet .tweetButton:hover,
|
|
.summary .tweet .linkedinButton:hover {
|
|
color: #F2F2F2;
|
|
background: #e74c3c;
|
|
}
|
|
.summary .tweet input {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
|
|
.promess {
|
|
padding: 0em 2em;
|
|
margin-bottom: 0.5em;
|
|
font-weight: normal;
|
|
font-size: 1.2em;
|
|
}
|
|
.price {
|
|
padding: 0em 2em 3em;
|
|
margin-top: 0em;
|
|
font-size: 0.9em;
|
|
}
|
|
.url {
|
|
width: 50%;
|
|
}
|
|
.launchBtn {
|
|
background: #ffa319;
|
|
color: #fff;
|
|
}
|
|
.launchBtn:focus {
|
|
background: #e74c3c;
|
|
}
|
|
.launchBtn.disabled {
|
|
background: #deaca6;
|
|
}
|
|
.launchBtn.disabled:focus {
|
|
color: #ddd;
|
|
}
|
|
.settings {
|
|
width: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
.settings input,
|
|
.settings select {
|
|
font-size: 1em;
|
|
}
|
|
.settings input[type=text] {
|
|
width: 100%;
|
|
min-width: 4em;
|
|
}
|
|
.device {
|
|
margin-top: 3em;
|
|
}
|
|
.device .item {
|
|
display: inline-block;
|
|
margin: 1em 0.75em;
|
|
width: 5.5em;
|
|
height: 5.5em;
|
|
color: #FFF;
|
|
border: 1px solid #FFF;
|
|
padding: 1px;
|
|
border-radius: 0.5em;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.device .item.active {
|
|
color: #ffa319;
|
|
border: 2px solid #ffa319;
|
|
padding: 0;
|
|
}
|
|
.device .item:hover {
|
|
color: #ffa319;
|
|
}
|
|
.device .item > div {
|
|
margin: 0.2em 0 0.1em;
|
|
font-size: 3em;
|
|
}
|
|
.settingsTooltip {
|
|
position: relative;
|
|
}
|
|
.settingsTooltip span {
|
|
font-size: 0.8em;
|
|
vertical-align: text-top;
|
|
}
|
|
.settingsTooltip div {
|
|
display: none;
|
|
position: absolute;
|
|
padding: 0.5em;
|
|
width: 25em;
|
|
background: #FFF;
|
|
color: #000;
|
|
font-size: 0.8em;
|
|
border-radius: 1em;
|
|
border: 2px solid #ffa319;
|
|
white-space: normal;
|
|
z-index: 2;
|
|
}
|
|
.settingsTooltip:hover div {
|
|
display: block;
|
|
}
|
|
.showAdvanced {
|
|
display: inline-block;
|
|
margin-top: 2em;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
}
|
|
.showAdvanced:hover {
|
|
color: #ffa319;
|
|
}
|
|
.currentSettings {
|
|
font-size: 0.9em;
|
|
}
|
|
.currentSettings span {
|
|
color: #ffa319;
|
|
}
|
|
.currentSettings span:after {
|
|
color: #FFF;
|
|
content: ",";
|
|
}
|
|
.currentSettings span:last-child:after {
|
|
content: "";
|
|
}
|
|
.advanced {
|
|
margin: 1em 0 0;
|
|
display: table;
|
|
width: 100%;
|
|
text-align: left;
|
|
border-spacing: 0.75em;
|
|
}
|
|
.advanced > div {
|
|
display: table-row;
|
|
}
|
|
.advanced > div > div {
|
|
display: table-cell;
|
|
width: 75%;
|
|
}
|
|
.advanced > div > div.label {
|
|
width: 25%;
|
|
white-space: nowrap;
|
|
}
|
|
.advanced .subTable {
|
|
display: table;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
}
|
|
.advanced .subTable > div {
|
|
display: table-row;
|
|
}
|
|
.advanced .subTable > div > div {
|
|
display: table-cell;
|
|
padding: 0 0 0.75em;
|
|
}
|
|
.features {
|
|
display: table;
|
|
width: 50%;
|
|
margin: 6em auto 0;
|
|
font-size: 0.9em;
|
|
color: #413;
|
|
}
|
|
.features > div {
|
|
width: 33.3%;
|
|
display: table-cell;
|
|
padding: 0 1.5em;
|
|
}
|
|
input[type=submit],
|
|
input.url {
|
|
padding: 0 0.5em;
|
|
margin: 0.5em;
|
|
font-size: 1.2em;
|
|
height: 2em;
|
|
border: 0 solid;
|
|
border-radius: 0.5em;
|
|
box-shadow: 0.1em 0.2em 0 0 #5e2846;
|
|
outline: none;
|
|
}
|
|
input[type=submit]:hover {
|
|
color: #ddd;
|
|
}
|
|
input[type=submit].clicked {
|
|
color: #ddd;
|
|
position: relative;
|
|
left: 0.1em;
|
|
top: 0.2em;
|
|
box-shadow: none;
|
|
}
|
|
/*
|
|
* Core Owl Carousel CSS File
|
|
* v1.3.2
|
|
*/
|
|
|
|
/* clearfix */
|
|
.owl-carousel .owl-wrapper:after {
|
|
content: ".";
|
|
display: block;
|
|
clear: both;
|
|
visibility: hidden;
|
|
line-height: 0;
|
|
height: 0;
|
|
}
|
|
/* display none until init */
|
|
.owl-carousel{
|
|
display: none;
|
|
position: relative;
|
|
width: 100%;
|
|
-ms-touch-action: pan-y;
|
|
}
|
|
.owl-carousel .owl-wrapper{
|
|
display: none;
|
|
position: relative;
|
|
-webkit-transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
.owl-carousel .owl-wrapper-outer{
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.owl-carousel .owl-wrapper-outer.autoHeight{
|
|
-webkit-transition: height 500ms ease-in-out;
|
|
-moz-transition: height 500ms ease-in-out;
|
|
-ms-transition: height 500ms ease-in-out;
|
|
-o-transition: height 500ms ease-in-out;
|
|
transition: height 500ms ease-in-out;
|
|
}
|
|
|
|
.owl-carousel .owl-item{
|
|
float: left;
|
|
}
|
|
.owl-controls .owl-page,
|
|
.owl-controls .owl-buttons div{
|
|
cursor: pointer;
|
|
}
|
|
.owl-controls {
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
/* mouse grab icon */
|
|
.grabbing {
|
|
cursor:url(grabbing.png) 8 8, move;
|
|
}
|
|
|
|
/* fix */
|
|
.owl-carousel .owl-wrapper,
|
|
.owl-carousel .owl-item{
|
|
-webkit-backface-visibility: hidden;
|
|
-moz-backface-visibility: hidden;
|
|
-ms-backface-visibility: hidden;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-moz-transform: translate3d(0,0,0);
|
|
-ms-transform: translate3d(0,0,0);
|
|
}
|