106 lines
2.3 KiB
CSS
106 lines
2.3 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/. */
|
|
|
|
.main-content {
|
|
max-width: 72em;
|
|
margin-inline: auto;
|
|
padding: var(--space-large);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-large);
|
|
}
|
|
|
|
/* The filters and the actions each own a row rather than competing for one, so a
|
|
long translation adds a line instead of reflowing the header (bug 2066009). */
|
|
.filters,
|
|
.actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: end;
|
|
gap: var(--space-medium);
|
|
}
|
|
|
|
.filters moz-input-search {
|
|
flex: 1 1 var(--size-layout-medium);
|
|
}
|
|
|
|
.actions {
|
|
padding-block-end: var(--space-large);
|
|
border-block-end: 1px solid var(--border-color);
|
|
}
|
|
|
|
.log-count {
|
|
margin: 0;
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
.log-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-small);
|
|
}
|
|
|
|
.log-row {
|
|
&.success {
|
|
--log-status-icon: url("chrome://global/skin/icons/check-filled.svg");
|
|
--log-status-icon-fill: var(--icon-color-success);
|
|
}
|
|
|
|
&.error {
|
|
--log-status-icon: url("chrome://global/skin/icons/error.svg");
|
|
--log-status-icon-fill: var(--icon-color-critical);
|
|
}
|
|
|
|
&::part(heading) {
|
|
padding-inline-start: calc(var(--icon-size) + var(--space-small));
|
|
background: var(--log-status-icon) left center / var(--icon-size) no-repeat;
|
|
-moz-context-properties: fill;
|
|
fill: var(--log-status-icon-fill);
|
|
}
|
|
|
|
&:dir(rtl)::part(heading) {
|
|
background-position-x: right;
|
|
}
|
|
}
|
|
|
|
.log-row-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-medium);
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
.log-contents {
|
|
margin-block: var(--space-small) 0;
|
|
max-block-size: 30em;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
font-family: monospace;
|
|
unicode-bidi: plaintext;
|
|
text-align: start;
|
|
}
|
|
|
|
.log-line {
|
|
&.error {
|
|
color: var(--text-color-error);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
&.warn {
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
margin: 0;
|
|
text-align: center;
|
|
color: var(--text-color-deemphasized);
|
|
}
|