diff options
Diffstat (limited to 'toolkit/content/aboutTelemetry.css')
| -rw-r--r-- | toolkit/content/aboutTelemetry.css | 340 |
1 files changed, 340 insertions, 0 deletions
diff --git a/toolkit/content/aboutTelemetry.css b/toolkit/content/aboutTelemetry.css new file mode 100644 index 0000000000..1022d3bf01 --- /dev/null +++ b/toolkit/content/aboutTelemetry.css @@ -0,0 +1,340 @@ +/* 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 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +body { + display: flex; +} + +/* This is needed to make the sidebar not hide the last button but breaks printing by hiding overflowing content */ +@media not print { + html, body { + height: 100%; + } +} + +#categories { + padding-top: 0; + overflow-y: auto; + margin-bottom: 42px; + user-select: none; +} + +.main-content.search > section > *:not(.data) { + display: none; +} + +.main-content { + flex: 1; + line-height: 1.6; +} + +#home-section { + font-size: 18px; +} + +#category-raw { + background-color: var(--in-content-page-background); + position: absolute; + bottom: 0; + inset-inline-start: 0; +} + +.heading { + display: flex; + flex-direction: column; + font-size: 17px; + font-weight: 600; + pointer-events: none; + padding: 12px 8px; +} + +.header { + display: flex; +} + +.header select { + margin-inline-start: 4px; +} + +#sectionTitle { + flex-grow: 1; +} + +#sectionFilters { + display: flex; + align-items: center; + margin-inline-start: 5px; +} + +#stores { + padding-block: 5px; + padding-inline-start: 5px; +} + +#ping-type { + flex-grow: 1; + text-align: center; + pointer-events: all; + cursor: pointer; +} + +#older-ping, +#newer-ping, +#ping-date { + pointer-events: all; + user-select: none; + cursor: pointer; + text-align: center; +} + +.dropdown { + background-image: url(chrome://global/skin/icons/arrow-down.svg); + background-position: right 8px center; + background-repeat: no-repeat; + -moz-context-properties: fill; + fill: currentColor; +} + +.dropdown:dir(rtl) { + background-position-x: left 8px; +} + +#controls { + display: flex; + margin-top: 4px; + justify-content: space-between; +} + +.category:not(.has-data) { + display: none; +} + +.category { + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 42px; +} + +#categories > .category.category-no-icon { + margin-inline-start: 0; + margin-inline-end: 0; + width: auto; +} + +.category-name { + padding: 13px 0; +} + +.category-subsection { + color: var(--in-content-text-color); + padding: 8px 0; + padding-inline-start: 16px; + display: none; +} + +.category-subsection.selected { + color: inherit; +} + +.category-subsection::first-letter { + text-transform: uppercase; +} + +.category.selected > .category-subsection { + display: block; +} + +.category-name { + pointer-events: none; +} + +section:not(.active) { + display: none; +} + +#ping-explanation > span { + cursor: pointer; + border-bottom-width: 2px; + border-bottom-style: solid; +} + +#no-search-results { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + align-items: center; + flex-direction: column; +} + +#no-search-results-text { + font-size: 17px; + margin-bottom: 2em; +} + +.hidden { + display: none !important; +} + +#ping-picker { + min-width: 300px; + position: fixed; + z-index: 2; + top: 32px; + border-radius: 2px; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); + display: flex; + padding: 24px; + flex-direction: column; + background-color: var(--in-content-box-background); + border: 1px solid var(--in-content-box-border-color); + margin: 12px 0; + inset-inline-start: 12px; +} + +#ping-picker .title { + margin: 4px 0; +} + +#ping-source-picker { + margin-inline-start: 5px; + margin-bottom: 10px; +} + +#ping-source-archive-container.disabled { + opacity: 0.5; +} + +.stack-title { + font-size: medium; + font-weight: bold; + text-decoration: underline; +} + +#histograms { + overflow: hidden; +} + +.histogram { + float: inline-start; + white-space: nowrap; + padding: 10px; + position: relative; /* required for position:absolute of the contained .copy-node */ + padding-block: 12px; + padding-inline: 20px; + border: 1px solid var(--in-content-box-border-color); + background-color: var(--in-content-box-background); + border-radius: 2px; + margin-bottom: 24px; + margin-inline-end: 24px; + min-height: 17.5em; +} + +.histogram-title { + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; + overflow: hidden; + font-size: 17px +} + +.histogram-stats { + font-size: 13px; +} + +.keyed-histogram { + white-space: nowrap; + position: relative; /* required for position:absolute of the contained .copy-node */ + overflow: hidden; + margin-bottom: 1em; +} + +.keyed-scalar, +.sub-section { + margin-bottom: 1em; +} + +.keyed-title { + text-overflow: ellipsis; + margin: 12px 0; + font-size: 17px; + white-space: nowrap; +} + +.bar { + font-size: 17px; + width: 2em; + margin: 2px; + text-align: center; + float: inline-start; + font-family: monospace; +} + +.bar-inner { + background-color: var(--in-content-accent-color); + border: 1px solid rgba(0,0,0,0.1); + border-radius: 2px; +} + +.bar:nth-child(even) .long-label { + margin-bottom: 1em; +} + +th, td, table { + text-align: start; + word-break: break-all; + border-collapse: collapse; +} + +table { + table-layout: fixed; + width: 100%; + font-size: 15px; +} + +td { + padding-bottom: 0.25em; + border-bottom: 1px solid var(--in-content-border-color); +} + +tr:not(:first-child):hover { + background-color: rgba(0, 0, 0, 0.05); +} + +th { + font-size: 13px; + white-space: nowrap; + padding: 0.5em 0; +} + +caption { + text-align: start; + font-size: 22px; + margin-block: 0.5em; + margin-inline: 0; +} + +.copy-node { + visibility: hidden; + position: absolute; + bottom: 1px; + inset-inline-end: 1px; +} + +.histogram:hover .copy-node { + visibility: visible; +} + +#raw-ping-data { + font-size: 15px; +} + +.clearfix { + clear: both; +} |