mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 19:55:39 +00:00
ba1f03bb2f
The arrow icon in about:telemetry's process <select> overlapped the text in RTL. It turns out that this was also a problem in a couple of other places in the UI, including the Add New Credit Card and And New Address dialogs for form autofill. Now, those are fixed too. On the about:telemetry page, the "Raw JSON" element is in the appropriate place now. Earlier it was on the left in RTL locales.
356 lines
5.5 KiB
CSS
356 lines
5.5 KiB
CSS
/* 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");
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
#categories {
|
|
padding-top: 0px;
|
|
overflow-y: auto;
|
|
margin-bottom: 42px;
|
|
}
|
|
|
|
.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;
|
|
left: 0;
|
|
}
|
|
|
|
body[dir=rtl] #category-raw{
|
|
right: 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-left: 4px;
|
|
}
|
|
|
|
#sectionTitle {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.heading > h3 {
|
|
margin: 0;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
#ping-type {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#older-ping, #newer-ping, #ping-date {
|
|
pointer-events: all;
|
|
-moz-user-select: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.dropdown {
|
|
background-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
|
|
background-position: right 8px center;
|
|
background-repeat: no-repeat;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
body[dir=rtl] .dropdown {
|
|
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;
|
|
min-height: 42px;
|
|
}
|
|
|
|
.category-name {
|
|
padding: 9px 0px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.category-subsection {
|
|
color: var(--in-content-text-color);
|
|
padding: 8px 0px;
|
|
padding-inline-start: 16px;
|
|
display: none;
|
|
-moz-user-select: 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;
|
|
}
|
|
|
|
#page-description {
|
|
border: 1px solid threedshadow;
|
|
margin: 0px;
|
|
padding: 10px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.no-search-results-image {
|
|
background-image: url("chrome://browser/skin/preferences/in-content/no-search-results.svg");
|
|
width: 380px;
|
|
height: 293px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#ping-picker {
|
|
min-width: 300px;
|
|
position: fixed;
|
|
z-index: 2;
|
|
top: 32px;
|
|
left: 12px;
|
|
border-radius: 2px;
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
|
|
display: flex;
|
|
padding: 24px;
|
|
flex-direction: column;
|
|
background-color: white;
|
|
border: 1px solid var(--in-content-box-border-color);
|
|
margin: 12px 0px;
|
|
}
|
|
|
|
#ping-picker .title {
|
|
margin: 4px 0px;
|
|
}
|
|
|
|
#ping-source-picker {
|
|
margin-left: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#ping-source-archive-container.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.stack-title {
|
|
font-size: medium;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#histograms, #thread-hang-stats>div {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.histogram {
|
|
float: left;
|
|
white-space: nowrap;
|
|
padding: 10px;
|
|
position: relative; /* required for position:absolute of the contained .copy-node */
|
|
padding: 12px 20px 12px 20px;
|
|
border: 1px solid var(--in-content-box-border-color);
|
|
border-radius: 2px;
|
|
margin-bottom: 24px;
|
|
margin-right: 24px;
|
|
min-height: 17.5em;
|
|
}
|
|
|
|
|
|
body[dir="rtl"] .histogram {
|
|
float: right;
|
|
}
|
|
|
|
.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: left;
|
|
font-family: monospace;
|
|
}
|
|
|
|
body[dir="rtl"] .bar {
|
|
float: right;
|
|
}
|
|
|
|
.bar-inner {
|
|
background-color: #0a84ff;
|
|
border: 1px solid #0060df;
|
|
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-box-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;
|
|
}
|
|
|
|
body[dir="rtl"] th {
|
|
text-align: right;
|
|
}
|
|
|
|
caption {
|
|
text-align: left;
|
|
font-size: 22px;
|
|
margin: 0.5em 0 0.5em 0;
|
|
}
|
|
|
|
body[dir="rtl"] caption {
|
|
text-align: right;
|
|
}
|
|
|
|
.copy-node {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
bottom: 1px;
|
|
right: 1px;
|
|
}
|
|
|
|
body[dir="rtl"] .copy-node {
|
|
left: 1px;
|
|
}
|
|
|
|
.histogram:hover .copy-node {
|
|
visibility: visible;
|
|
}
|
|
|
|
#raw-ping-data {
|
|
font-size: 15px;
|
|
}
|