387 lines
7.3 KiB
SCSS
387 lines
7.3 KiB
SCSS
/* 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;
|
|
}
|
|
|
|
main.main-panel {
|
|
margin: 0 auto;
|
|
width: $wrapper-default-width;
|
|
|
|
@media (min-width: $break-point-medium) {
|
|
width: $wrapper-max-width-medium;
|
|
}
|
|
|
|
@media (min-width: $break-point-large) {
|
|
width: $wrapper-max-width-large;
|
|
}
|
|
|
|
@media (min-width: $break-point-widest) {
|
|
width: $wrapper-max-width-widest;
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|