Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* Statistics panel */
.statistics-panel {
display: flex;
height: 100vh;
overflow: auto;
}
.statistics-panel .back-button {
height: -moz-fit-content;
position: absolute;
padding: 7px 5px;
margin: 0px;
top: 8px;
inset-inline-start: 8px;
}
.theme-light .statistics-panel .back-button {
background-color: var(--grey-20);
}
.statistics-panel .splitter {
border-color: var(--theme-splitter-color);
cursor: default;
pointer-events: none;
height: 100%;
}
.statistics-panel .charts-container {
display: flex;
width: 100%;
}
.statistics-panel .charts,
.statistics-panel .pie-table-chart-container {
width: 100%;
height: 100%;
margin-bottom: 1rem;
}
.statistics-panel .learn-more-link {
font-weight: 400;
}
.statistics-panel .table-chart-title {
display: flex;
align-items: center;
}
.pie-table-chart-container {
display: flex;
justify-content: center;
align-items: center;
}
.statistics-panel .pie-chart-container {
margin-inline-start: 3vw;
margin-inline-end: 1vw;
}
.statistics-panel .table-chart-container {
min-width: 240px;
margin-inline-start: 1vw;
margin-inline-end: 3vw;
}
tr[data-statistic-name] td:first-of-type {
border-inline-start: 15px solid var(--stat-color);
}
path[data-statistic-name] {
fill: var(--stat-color);
}
[data-statistic-name=html] {
--stat-color: var(--theme-highlight-bluegrey);
}
[data-statistic-name=css] {
--stat-color: var(--theme-highlight-blue);
}
[data-statistic-name=js] {
--stat-color: var(--theme-highlight-lightorange);
}
[data-statistic-name=xhr] {
--stat-color: var(--theme-highlight-orange);
}
[data-statistic-name=fonts] {
--stat-color: var(--theme-highlight-purple);
}
[data-statistic-name=images] {
--stat-color: var(--theme-highlight-pink);
}
[data-statistic-name=media] {
--stat-color: var(--theme-highlight-green);
}
/*
* Align cell text to the center by default.
*/
.table-chart-row-label {
text-align: center;
}
.table-chart-row-label[name=count] {
width: 3em;
text-align: end;
}
.table-chart-row-label[name=label] {
width: 7em;
text-align: start;
}
.table-chart-row-label[name=size] {
width: 7em;
text-align: start;
}
.table-chart-row-label[name=time] {
width: 7em;
text-align: start;
}
.table-chart-totals {
display: flex;
flex-direction: column;
}
/* Responsive web design support */
@media (max-width: 700px) {
.statistics-panel .charts-container {
flex-direction: column;
/* Minus 4em for statistics back button width */
width: calc(100% - 4em);
}
.statistics-panel .splitter {
width: 100%;
height: 1px;
}
.statistics-panel .table-chart-title {
margin-top: 3rem;
}
.statistics-panel .charts,
.statistics-panel .pie-table-chart-container{
margin-bottom: 2rem;
}
}
.offscreen{
position: absolute!important;
font-size: 0px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
clip-path: polygon(0 0,0 0,0 0,0 0);
}