Source code
Revision control
Copy as Markdown
Other Tools
/* 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
/* stylelint-disable max-nesting-depth */
@import 'chrome://global/skin/in-content/common.css';
.asrouter-admin {
$monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono',
'Droid Sans Mono', 'Source Code Pro', monospace;
$sidebar-width: 160px;
font-family: system-ui;
max-width: 1300px;
box-sizing: border-box;
font-size: var(--font-size-root);
padding-inline-start: $sidebar-width + 40px;
.sidebar {
inset-inline-start: 0;
position: fixed;
width: $sidebar-width;
ul {
margin: 0;
padding: 0;
list-style: none;
}
.category {
display: block;
padding: 10px 14px;
border-radius: 4px;
margin-inline-start: 20px;
color: var(--in-content-page-color);
text-decoration: none;
user-select: none;
&:hover {
background-color: var(--in-content-button-background-hover);
&:active {
background-color: var(--in-content-button-background-active);
}
}
&[data-selected] {
color: var(--color-accent-primary);
}
}
}
.main-panel {
margin-block: 12px;
margin-inline-end: 12px;
}
.button-box {
display: flex;
align-items: center;
gap: 8px;
&.baseline {
align-items: baseline;
}
&.vertical {
flex-direction: column;
align-items: stretch;
gap: 0;
input[type='radio'] {
align-self: center;
}
button {
margin-block: 0;
}
}
&:not(.vertical) {
button {
margin-inline: 0;
}
}
button {
padding-block: 0;
min-height: 32px;
min-width: 32px;
}
}
.test-only {
display: block;
visibility: hidden;
overflow: hidden;
width: 0;
height: 0;
min-height: 0;
min-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.icon {
$icon-size: 16px;
$smaller-icon-size: 12px;
display: inline-block;
width: $icon-size;
height: $icon-size;
vertical-align: middle;
background-position: center center;
background-repeat: no-repeat;
background-size: $icon-size;
-moz-context-properties: fill;
fill: currentColor;
&.small {
width: $smaller-icon-size;
height: $smaller-icon-size;
background-size: $smaller-icon-size;
}
// helper classes
&.icon-small-spacer {
margin-inline-end: 6px;
}
// icon images
&.icon-info {
background-image: url('chrome://global/skin/icons/info.svg');
}
&.icon-dismiss {
background-image: url('chrome://global/skin/icons/close.svg');
}
&.icon-undo {
background-image: url('chrome://global/skin/icons/undo.svg');
}
&.icon-arrowhead-down {
background-image: url('chrome://global/skin/icons/arrow-down-12.svg');
}
&.icon-arrowhead-forward {
background-image: url('chrome://global/skin/icons/arrow-right-12.svg');
&:dir(rtl) {
background-image: url('chrome://global/skin/icons/arrow-left-12.svg');
}
}
}
h1 {
font-size: 2rem;
font-weight: 200;
}
h2 button,
p button {
font-size: 1rem;
padding: 6px 12px;
margin-inline-start: 8px;
margin-block: 0;
&.small {
display: inline-flex;
font-size: var(--font-size-small);
padding: 4px 8px;
margin-inline-start: 8px;
}
}
table {
border-collapse: collapse;
&.errorReporting {
tr {
border: 1px solid var(--in-content-box-border-color);
}
td {
padding: 4px;
&[rowspan] {
border: 1px solid var(--in-content-box-border-color);
}
}
}
&.bordered-table {
min-width: 100%;
tr:first-child td {
border-top: 1px solid var(--in-content-box-border-color);
}
td {
vertical-align: top;
padding: 8px;
border-bottom: 1px solid var(--in-content-box-border-color);
&.no-wrap {
white-space: nowrap;
}
&.fixed-width {
width: 0;
}
&:first-child {
border-inline-start: 1px solid var(--in-content-box-border-color);
}
&:last-child {
border-inline-end: 1px solid var(--in-content-box-border-color);
}
}
}
input {
&[type='checkbox'],
&[type='radio'] {
margin: 0;
}
}
}
.sourceLabel:not(:empty) {
background: var(--background-color-box);
padding: 2px 5px;
border-radius: 3px;
&.isDisabled {
background: rgba(215, 0, 34, 30%);
color: var(--dialog-warning-text-color);
}
}
.messages-list {
display: flex;
flex-flow: column nowrap;
gap: 12px;
margin-block: 12px;
}
.message-item {
display: flex;
flex-flow: column nowrap;
gap: 4px;
&.blocked {
.message-id,
.message-stats,
textarea {
opacity: 0.5;
}
}
pre {
display: flex;
&.collapsed {
display: none;
}
}
.message-textarea {
direction: ltr;
border-radius: 4px;
width: auto;
min-width: 400px;
resize: vertical;
flex-grow: 1;
font-family: $monospace;
margin: 4px 0;
}
}
.small-text {
font-size: var(--font-size-small);
}
pre {
margin: 0;
font-size: var(--font-size-small);
font-family: $monospace;
}
.errorState {
border-color: var(--dialog-warning-text-color);
outline-color: var(--dialog-warning-text-color);
}
.helpLink {
padding: 10px;
display: flex;
background: var(--in-content-box-info-background);
border-radius: 3px;
align-items: center;
width: fit-content;
max-width: 100%;
ul {
margin: 0;
padding-inline-start: 1.25em;
}
a {
text-decoration: underline;
}
.icon {
min-width: 18px;
min-height: 18px;
}
}
button.small {
align-items: center;
display: flex;
font-size: var(--font-size-small);
padding: 4px 8px;
min-height: 0;
margin-inline: 0;
}
.clearButton {
border: 0;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
min-width: 0;
}
.filters {
margin-block: 8px;
h3 {
margin-block: 8px;
}
.row {
display: flex;
flex-flow: row nowrap;
gap: 60px;
}
.col {
display: flex;
flex-flow: column nowrap;
}
}
moz-toggle::part(label) {
justify-content: revert;
}
.jexl-evaluator-row {
vertical-align: top;
}
.jexl-evaluator {
display: flex;
flex-flow: column nowrap;
gap: 8px;
.jexl-evaluator-textareas {
display: flex;
flex-flow: row nowrap;
gap: 8px;
align-items: flex-start;
}
.jexl-evaluator-input {
display: flex;
flex-flow: column nowrap;
gap: 8px;
align-items: start;
}
.jexl-evaluator-output {
display: flex;
flex-flow: column nowrap;
gap: 8px;
align-items: end;
}
}
textarea[readonly] {
color: var(--text-color-deemphasized);
border-color: var(--in-content-border-color);
}
.monospace {
font-family: $monospace;
}
input[type='text'].monospace {
min-height: revert;
}
.no-margins,
h2 .no-margins,
p .no-margins {
margin: 0;
}
.targeting-editor {
resize: vertical;
&.small {
white-space: nowrap;
}
}
.impressions-section {
display: flex;
flex-direction: column;
gap: 12px;
margin-block: 12px;
.impressions-item {
display: flex;
flex-flow: column nowrap;
padding: 8px;
border: 1px solid var(--in-content-box-border-color);
border-radius: 5px;
.impressions-inner-box {
display: flex;
flex-flow: row nowrap;
gap: 8px;
}
.impressions-category {
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
white-space: nowrap;
flex-grow: 0.1;
}
.impressions-buttons {
display: flex;
flex-direction: column;
gap: 8px;
button {
margin: 0;
}
}
.impressions-editor {
display: flex;
flex-grow: 1.5;
textarea {
direction: ltr;
border-radius: 4px;
width: auto;
min-width: 400px;
margin: 0;
resize: vertical;
flex-grow: 1;
font-family: $monospace;
}
}
}
}
}