toolkit/content/aboutTelemetry.css

   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 @import url("chrome://global/skin/in-content/common.css");
   6
   7 body {
   8   display: flex;
   9 }
  10
  11 /* This is needed to make the sidebar not hide the last button but breaks printing by hiding overflowing content */
  12 @media not print {
  13   html, body {
  14     height: 100%;
  15   }
  16 }
  17
  18 #categories {
  19   padding-top: 0;
  20   overflow-y: auto;
  21   margin-bottom: 42px;
  22   user-select: none;
  23 }
  24
  25 .main-content.search > section > *:not(.data) {
  26   display: none;
  27 }
  28
  29 .main-content {
  30   flex: 1;
  31   line-height: 1.6;
  32 }
  33
  34 #home-section {
  35   font-size: 18px;
  36 }
  37
  38 #category-raw {
  39   background-color: var(--in-content-page-background);
  40   position: absolute;
  41   bottom: 0;
  42   inset-inline-start: 0;
  43 }
  44
  45 .heading {
  46   display: flex;
  47   flex-direction: column;
  48   font-size: 17px;
  49   font-weight: 600;
  50   pointer-events: none;
  51   padding: 12px 8px;
  52 }
  53
  54 .header {
  55   display: flex;
  56 }
  57
  58 .header select {
  59   margin-inline-start: 4px;
  60 }
  61
  62 #sectionTitle {
  63   flex-grow: 1;
  64 }
  65
  66 #sectionFilters {
  67   display: flex;
  68   align-items: center;
  69   margin-inline-start: 5px;
  70 }
  71
  72 #stores {
  73   padding-block: 5px;
  74   padding-inline-start: 5px;
  75 }
  76
  77 #ping-type {
  78   flex-grow: 1;
  79   text-align: center;
  80   pointer-events: all;
  81   cursor: pointer;
  82 }
  83
  84 #older-ping,
  85 #newer-ping,
  86 #ping-date {
  87   pointer-events: all;
  88   user-select: none;
  89   cursor: pointer;
  90   text-align: center;
  91 }
  92
  93 .dropdown {
  94   background-image: url(chrome://global/skin/icons/arrow-down.svg);
  95   background-position: right 8px center;
  96   background-repeat: no-repeat;
  97   -moz-context-properties: fill;
  98   fill: currentColor;
  99 }
 100
 101 .dropdown:dir(rtl) {
 102   background-position-x: left 8px;
 103 }
 104
 105 #controls {
 106   display: flex;
 107   margin-top: 4px;
 108   justify-content: space-between;
 109 }
 110
 111 .category:not(.has-data) {
 112   display: none;
 113 }
 114
 115 .category {
 116   cursor: pointer;
 117   display: flex;
 118   flex-direction: column;
 119   justify-content: center;
 120   min-height: 42px;
 121 }
 122
 123 #categories > .category.category-no-icon {
 124   margin-inline-start: 0;
 125   margin-inline-end: 0;
 126   width: auto;
 127 }
 128
 129 .category-name {
 130   padding: 13px 0;
 131 }
 132
 133 .category-subsection {
 134   color: var(--in-content-text-color);
 135   padding: 8px 0;
 136   padding-inline-start: 16px;
 137   display: none;
 138 }
 139
 140 .category-subsection.selected {
 141   color: inherit;
 142 }
 143
 144 .category-subsection::first-letter {
 145   text-transform: uppercase;
 146 }
 147
 148 .category.selected > .category-subsection {
 149   display: block;
 150 }
 151
 152 .category-name {
 153   pointer-events: none;
 154 }
 155
 156 section:not(.active) {
 157   display: none;
 158 }
 159
 160 #ping-explanation > span {
 161   cursor: pointer;
 162   border-bottom-width: 2px;
 163   border-bottom-style: solid;
 164 }
 165
 166 #no-search-results {
 167   position: fixed;
 168   top: 50%;
 169   left: 50%;
 170   transform: translate(-50%, -50%);
 171   display: flex;
 172   align-items: center;
 173   flex-direction: column;
 174 }
 175
 176 #no-search-results-text {
 177   font-size: 17px;
 178   margin-bottom: 2em;
 179 }
 180
 181 .hidden {
 182   display: none !important;
 183 }
 184
 185 #ping-picker {
 186   min-width: 300px;
 187   position: fixed;
 188   z-index: 2;
 189   top: 32px;
 190   border-radius: 2px;
 191   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
 192   display: flex;
 193   padding: 24px;
 194   flex-direction: column;
 195   background-color: var(--in-content-box-background);
 196   border: 1px solid var(--in-content-box-border-color);
 197   margin: 12px 0;
 198   inset-inline-start: 12px;
 199 }
 200
 201 #ping-picker .title {
 202   margin: 4px 0;
 203 }
 204
 205 #ping-source-picker {
 206   margin-inline-start: 5px;
 207   margin-bottom: 10px;
 208 }
 209
 210 #ping-source-archive-container.disabled {
 211   opacity: 0.5;
 212 }
 213
 214 .stack-title {
 215   font-size: medium;
 216   font-weight: bold;
 217   text-decoration: underline;
 218 }
 219
 220 #histograms {
 221   overflow: hidden;
 222 }
 223
 224 .histogram {
 225   float: inline-start;
 226   white-space: nowrap;
 227   padding: 10px;
 228   position: relative; /* required for position:absolute of the contained .copy-node */
 229   padding-block: 12px;
 230   padding-inline: 20px;
 231   border: 1px solid var(--in-content-box-border-color);
 232   background-color: var(--in-content-box-background);
 233   border-radius: 2px;
 234   margin-bottom: 24px;
 235   margin-inline-end: 24px;
 236   min-height: 17.5em;
 237 }
 238
 239 .histogram-title {
 240   text-overflow: ellipsis;
 241   width: 100%;
 242   white-space: nowrap;
 243   overflow: hidden;
 244   font-size: 17px
 245 }
 246
 247 .histogram-stats {
 248   font-size: 13px;
 249 }
 250
 251 .keyed-histogram {
 252   white-space: nowrap;
 253   position: relative; /* required for position:absolute of the contained .copy-node */
 254   overflow: hidden;
 255   margin-bottom: 1em;
 256 }
 257
 258 .keyed-scalar,
 259 .sub-section {
 260   margin-bottom: 1em;
 261 }
 262
 263 .keyed-title {
 264   text-overflow: ellipsis;
 265   margin: 12px 0;
 266   font-size: 17px;
 267   white-space: nowrap;
 268 }
 269
 270 .bar {
 271   font-size: 17px;
 272   width: 2em;
 273   margin: 2px;
 274   text-align: center;
 275   float: inline-start;
 276   font-family: monospace;
 277 }
 278
 279 .bar-inner {
 280   background-color: var(--in-content-accent-color);
 281   border: 1px solid rgba(0,0,0,0.1);
 282   border-radius: 2px;
 283 }
 284
 285 .bar:nth-child(even) .long-label {
 286   margin-bottom: 1em;
 287 }
 288
 289 th, td, table {
 290   text-align: start;
 291   word-break: break-all;
 292   border-collapse: collapse;
 293 }
 294
 295 table {
 296   table-layout: fixed;
 297   width: 100%;
 298   font-size: 15px;
 299 }
 300
 301 td {
 302   padding-bottom: 0.25em;
 303   border-bottom: 1px solid var(--in-content-border-color);
 304 }
 305
 306 tr:not(:first-child):hover {
 307   background-color: rgba(0, 0, 0, 0.05);
 308 }
 309
 310 th {
 311   font-size: 13px;
 312   white-space: nowrap;
 313   padding: 0.5em 0;
 314 }
 315
 316 caption {
 317   text-align: start;
 318   font-size: 22px;
 319   margin-block: 0.5em;
 320   margin-inline: 0;
 321 }
 322
 323 .copy-node {
 324   visibility: hidden;
 325   position: absolute;
 326   bottom: 1px;
 327   inset-inline-end: 1px;
 328 }
 329
 330 .histogram:hover .copy-node {
 331   visibility: visible;
 332 }
 333
 334 #raw-ping-data {
 335   font-size: 15px;
 336 }
 337
 338 .clearfix {
 339   clear: both;
 340 }