Source code
Revision control
Copy as Markdown
Other Tools
/* stylelint-disable max-nesting-depth */
.discoverystream-admin-toggle {
position: fixed;
// Adjust spacing for DevTools wrench icon to avoid overlapping the customize button
inset-block-end: calc(var(--button-size-icon) + var(--space-xxlarge) + var(--space-small));
inset-inline-end: var(--space-xlarge);
border: 0;
background: none;
z-index: 4;
border-radius: var(--border-radius-small);
.icon-devtools {
background-color: var(--button-background-color, rgba(21, 20, 26, 7%));
background-image: url('chrome://global/skin/icons/developer.svg');
background-size: var(--icon-size-medium);
box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 20%);
padding: calc(5 * var(--space-xsmall));
}
&:dir(rtl) {
transform: scaleX(-1);
}
&:hover {
background: var(--newtab-element-hover-color);
}
&.expanded {
background: $black-20;
}
}
.discoverystream-admin {
$border-color: var(--newtab-border-color);
$monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono',
'Source Code Pro', monospace;
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
background: var(--newtab-background-color);
height: 100%;
overflow-y: scroll;
margin: 0 auto;
color: var(--newtab-text-primary-color);
z-index: 3;
&.collapsed {
display: none;
}
h1 {
font-size: var(--font-size-xxlarge);
}
h2 .button,
p .button {
font-size: inherit;
padding: var(--space-xsmall) var(--space-medium);
margin-inline-start: var(--space-xsmall);
margin-block-end: 0;
}
.toggle-wrapper {
margin-block: var(--space-large);
width: 200px;
}
.details-section {
margin-block: var(--space-large);
summary {
font-size: var(--font-size-large);
}
}
table {
border-collapse: collapse;
width: 100%;
&.minimal-table {
border-collapse: collapse;
border: 1px solid $border-color;
td {
padding: var(--space-small);
}
td:first-child {
width: 1%;
white-space: nowrap;
}
td:not(:first-child) {
font-family: $monospace;
}
}
&.errorReporting {
tr {
border: 1px solid var(--newtab-background-color-secondary);
}
td {
padding: var(--space-xsmall);
&[rowspan] {
border: 1px solid var(--newtab-background-color-secondary);
}
}
}
}
.large-data-container {
max-height: 500px;
overflow-y: scroll;
}
.message-item {
&:first-child td {
border-top: 1px solid $border-color;
}
td {
vertical-align: top;
padding: var(--space-small);
border-bottom: 1px solid $border-color;
&.min {
width: 1%;
white-space: nowrap;
}
&.message-summary {
width: 60%;
}
&.button-column {
width: 15%;
}
&:first-child {
border-inline-start: 1px solid $border-color;
}
&:last-child {
border-inline-end: 1px solid $border-color;
}
}
&.blocked {
.message-id,
.message-summary {
opacity: 0.5;
}
.message-id {
opacity: 0.5;
}
}
.message-id {
font-family: $monospace;
font-size: var(--font-size-small);
}
}
pre {
background: var(--newtab-background-color-secondary);
margin: 0;
padding: var(--space-small);
font-size: var(--font-size-small);
max-width: 750px;
overflow: auto;
font-family: $monospace;
}
.helpLink {
padding: var(--space-medium);
display: flex;
background: $black-10;
border-radius: var(--border-radius-small);
align-items: center;
a {
text-decoration: underline;
}
.icon {
min-width: 18px;
min-height: 18px;
}
}
.ds-component {
margin-block-end: var(--space-large);
}
.collapsed {
display: none;
}
.icon {
display: inline-table;
width: 18px;
height: 18px;
}
.button {
&:disabled,
&:disabled:active {
opacity: 0.5;
cursor: unset;
box-shadow: none;
}
}
.weather-section {
margin-block-end: var(--space-xlarge);
form {
display: flex;
label {
margin-inline-end: var(--space-medium);
}
}
}
}