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);
appearance: none;
border: 0;
border-radius: var(--border-radius-small);
background-color: var(--button-background-color, rgba(21, 20, 26, 7%));
box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 20%);
padding: calc(5 * var(--space-xxsmall));
z-index: 4;
display: flex;
align-items: center;
.lightWallpaper &,
.darkWallpaper & {
background-color: var(--newtab-weather-background-color);
@media (prefers-contrast) {
background-color: var(--background-color-box);
}
}
&:hover {
background-color: var(--newtab-button-static-hover-background);
}
&:active {
background-color: var(--newtab-button-static-active-background);
}
&:focus-visible {
@include ds-focus;
background-color: var(--newtab-button-static-active-background);
}
&:dir(rtl) {
transform: scaleX(-1);
}
> div {
width: var(--icon-size-medium);
height: var(--icon-size-medium);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
> img {
-moz-context-properties: fill;
display: inline-block;
color: var(--icon-color);
fill: currentColor;
height: 100%;
object-fit: contain;
vertical-align: middle;
width: 100%;
}
}
}
.discoverystream-admin {
.personalization-data {
padding-block-end: var(--space-xlarge);
}
$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;
}
.inferred-personalization-overrides {
margin-block: var(--space-large);
}
.inferred-overrides-header {
display: flex;
align-items: center;
gap: var(--space-medium);
}
.inferred-overrides-title {
margin: 0;
}
.inferred-overrides-actions {
display: flex;
align-items: center;
gap: var(--space-medium);
.button {
margin: 0;
}
}
.inferred-overrides-toggle-row td:first-child {
font-weight: var(--font-weight-bold);
}
.inferred-overrides-last-refreshed {
display: flex;
align-items: center;
gap: var(--space-small);
font-size: var(--font-size-small);
margin-block: var(--space-small) var(--space-medium);
padding-inline-start: var(--space-small);
}
.inferred-overrides-last-refreshed-label {
font-weight: var(--font-weight-bold);
}
.inferred-vectors-row {
display: flex;
align-items: stretch;
gap: var(--space-xlarge);
margin-block-start: var(--space-xlarge);
}
.inferred-vector-column {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-small);
}
.inferred-vector-panel {
border: 1px solid var(--border-color);
padding: var(--space-small);
flex: 1;
display: flex;
flex-direction: column;
pre {
margin-block-start: 0;
flex: 1;
overflow: auto;
}
}
.inferred-vector-title {
font-weight: var(--font-weight-bold);
}
.inferred-overrides-table-header td {
font-weight: var(--font-weight-bold);
}
.inferred-score-col {
width: 1%;
white-space: nowrap;
text-align: center;
padding-inline: 0;
}
.inferred-overrides-toggle-row td {
vertical-align: middle;
}
.inferred-override-controls {
display: flex;
align-items: center;
gap: var(--space-medium);
}
.inferred-override-slider {
width: 160px;
}
.inferred-override-value {
min-width: 2ch;
text-align: end;
}
.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 var(--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-block-start: 1px solid var(--border-color);
}
td {
vertical-align: top;
padding: var(--space-small);
border-block-end: 1px solid var(--border-color);
&.min {
width: 1%;
white-space: nowrap;
}
&.message-summary {
width: 60%;
}
&.button-column {
width: 15%;
}
&:first-child {
border-inline-start: 1px solid var(--border-color);
}
&:last-child {
border-inline-end: 1px solid var(--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);
}
}
}
}