StatisticsPanel.css (3420B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* Statistics panel */ 6 7 @import "chrome://devtools/skin/chart.css"; 8 9 .statistics-panel { 10 display: flex; 11 height: 100vh; 12 overflow: auto; 13 } 14 15 .statistics-panel .back-button { 16 height: -moz-fit-content; 17 position: absolute; 18 padding: 7px 5px; 19 margin: 0; 20 top: 8px; 21 inset-inline-start: 8px; 22 } 23 24 .theme-light .statistics-panel .back-button { 25 background-color: var(--grey-20); 26 } 27 28 .statistics-panel .splitter { 29 border-color: var(--theme-splitter-color); 30 cursor: default; 31 pointer-events: none; 32 height: 100%; 33 } 34 35 .statistics-panel .charts-container { 36 display: flex; 37 width: 100%; 38 } 39 40 .statistics-panel .charts, 41 .statistics-panel .pie-table-chart-container { 42 width: 100%; 43 height: 100%; 44 margin-bottom: 1rem; 45 } 46 47 .statistics-panel .learn-more-link { 48 font-weight: 400; 49 } 50 51 .statistics-panel .table-chart-title { 52 display: flex; 53 align-items: center; 54 } 55 56 .pie-table-chart-container { 57 display: flex; 58 justify-content: center; 59 align-items: center; 60 } 61 62 .statistics-panel .pie-chart-container { 63 margin-inline-start: 3vw; 64 margin-inline-end: 1vw; 65 } 66 67 .statistics-panel .table-chart-container { 68 min-width: 240px; 69 margin-inline-start: 1vw; 70 margin-inline-end: 3vw; 71 } 72 73 /* Use a pseudo element for the "legend" so we can adapt to High Contrast Mode without 74 impacting the cell content */ 75 tr[data-statistic-name] td:first-of-type::before { 76 content: ""; 77 border-inline-start: 15px solid var(--stat-color); 78 forced-color-adjust: none; 79 margin-inline-end: 5px; 80 } 81 82 path[data-statistic-name] { 83 fill: var(--stat-color); 84 } 85 86 [data-statistic-name="html"] { 87 --stat-color: var(--theme-highlight-bluegrey); 88 } 89 90 [data-statistic-name="css"] { 91 --stat-color: var(--theme-highlight-blue); 92 } 93 94 [data-statistic-name="js"] { 95 --stat-color: var(--theme-highlight-lightorange); 96 } 97 98 [data-statistic-name="xhr"] { 99 --stat-color: var(--theme-highlight-orange); 100 } 101 102 [data-statistic-name="fonts"] { 103 --stat-color: var(--theme-highlight-purple); 104 } 105 106 [data-statistic-name="images"] { 107 --stat-color: var(--theme-highlight-pink); 108 } 109 110 [data-statistic-name="media"] { 111 --stat-color: var(--theme-highlight-green); 112 } 113 114 /* 115 * Align cell text to the center by default. 116 */ 117 .table-chart-row-label { 118 text-align: center; 119 } 120 121 .table-chart-row-label[name="count"] { 122 width: 3em; 123 text-align: end; 124 } 125 126 .table-chart-row-label[name="label"] { 127 width: 7em; 128 text-align: start; 129 } 130 131 .table-chart-row-label[name="size"] { 132 width: 7em; 133 text-align: start; 134 } 135 136 .table-chart-row-label[name="time"] { 137 width: 7em; 138 text-align: start; 139 } 140 141 .table-chart-totals { 142 display: flex; 143 flex-direction: column; 144 } 145 146 /* Responsive web design support */ 147 148 @media (max-width: 700px) { 149 .statistics-panel .charts-container { 150 flex-direction: column; 151 /* Minus 4em for statistics back button width */ 152 width: calc(100% - 4em); 153 } 154 155 .statistics-panel .splitter { 156 width: 100%; 157 height: 1px; 158 } 159 160 .statistics-panel .table-chart-title { 161 margin-top: 3rem; 162 } 163 164 .statistics-panel .charts, 165 .statistics-panel .pie-table-chart-container { 166 margin-bottom: 2rem; 167 } 168 } 169 170 .offscreen { 171 position: absolute !important; 172 font-size: 0; 173 overflow: hidden; 174 clip: rect(1px, 1px, 1px, 1px); 175 clip-path: polygon(0 0, 0 0, 0 0, 0 0); 176 }