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