Source code
Revision control
Copy as Markdown
Other Tools
.category-list {
border: none;
display: grid;
gap: 48px 16px;
grid-auto-rows: 86px;
grid-template-columns: 1fr 1fr 1fr;
margin-block-end: 20px;
padding: 0;
label {
display: inline-block;
font-size: var(--font-size-small);
text-align: center;
width: 100%;
}
}
.category-header {
display: flex;
justify-content: space-between;
.wallpapers-reset {
margin: unset;
}
}
.arrow-button {
background: url('chrome://global/skin/icons/arrow-left.svg') no-repeat left center;
&:dir(rtl) {
background: url('chrome://global/skin/icons/arrow-right.svg') no-repeat right center;
}
border: none;
cursor: pointer;
font-size: 16px;
margin-bottom: 25px;
padding-inline-start: 24px;
-moz-context-properties: fill;
fill: currentColor;
min-height: 1rem;
}
.wallpaper-input {
appearance: none;
background-clip: content-box;
background-repeat: no-repeat;
background-size: cover;
border-radius: 8px;
border: none;
box-shadow: $shadow-secondary;
cursor: pointer;
height: 86px;
margin: 0;
outline: 2px solid transparent;
padding: 0;
width: 100%;
&.theme-custom-wallpaper {
border: 2px dashed var(--border-color-default, #CFCFD8);
box-shadow: none;
position: relative;
&::after {
content: '';
-moz-context-properties: fill;
fill: var(--icon-color);
width: calc(var(--icon-size-default) * 1.25 ); // Custom size: ~20px;
height: calc(var(--icon-size-default) * 1.25 ); // Custom size: ~20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
&.theme-custom-wallpaper {
&::after {
background: url('chrome://global/skin/icons/plus-20.svg') center no-repeat;
}
}
$wallpapers: dark-landscape, dark-color, dark-mountain, dark-panda, dark-sky, dark-beach, light-beach, light-color, light-landscape, light-mountain, light-panda, light-sky;
@each $wallpaper in $wallpapers {
&.#{$wallpaper} {
}
}
&:checked {
border-color: transparent;
outline-color: var(--color-accent-primary-active);
padding: 2px;
}
&:focus-visible {
outline-color: var(--newtab-primary-action-background);
}
&:hover {
filter: brightness(55%);
outline-color: transparent;
}
}
.theme-custom-color-picker {
position: relative;
// Color Picker Icon
&::after {
background: url('chrome://global/skin/icons/color-picker-20.svg') center no-repeat;
content: '';
-moz-context-properties: fill;
fill: var(--icon-color);
width: calc(var(--icon-size-default) * 1.25); // Custom size: ~20px;
height: calc(var(--icon-size-default) * 1.25); // Custom size: ~20px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wallpaper-input {
border: 2px dashed var(--border-color-default, #CFCFD8);
box-shadow: none;
&.active {
border-color: transparent;
outline-color: var(--color-accent-primary-active);
padding: 2px;
}
}
label {
display: inline-block;
font-size: var(--font-size-small);
text-align: center;
width: 100%;
}
::-moz-color-swatch {
border-color: transparent;
}
}
.wallpaper-list {
display: grid;
gap: 16px;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: 86px;
margin: 16px 0;
padding: 0;
border: none;
&.category {
background-color: var(--newtab-background-color-secondary);
color: var(--newtab-text-primary-color);
display: unset;
gap: unset;
grid-auto-rows: unset;
grid-template-columns: unset;
/* XXXdholbert The 32px subtraction here is to account for our 16px of
* margin on top and bottom. Ideally this should change to use
height: calc(100% - 32px);
inset-inline-start: 25px;
position: absolute;
top: 0;
width: 380px;
z-index: 2;
transform: translateX(100%);
&:dir(rtl) {
transform: translateX(-100%);
}
fieldset {
border: none;
display: grid;
gap: 16px;
grid-auto-rows: 86px;
grid-template-columns: 1fr 1fr 1fr;
}
@media (prefers-reduced-motion: no-preference) {
&.wallpaper-list-enter,
&.wallpaper-list-exit,
&.wallpaper-list-enter-done,
&.wallpaper-list-exit-done {
transition: transform 300ms;
}
}
&.wallpaper-list-enter-done,
&.wallpaper-list-enter-active {
transform: translateX(0);
}
}
&:not(.ignore-color-mode) .wallpaper-input,
&:not(.ignore-color-mode) .sr-only {
&.theme-light {
display: inline-block;
@include dark-theme-only {
display: none;
}
}
&.theme-dark {
display: none;
@include dark-theme-only {
display: inline-block;
}
}
}
// visually hide label, but still read by screen readers
.sr-only {
opacity: 0;
overflow: hidden;
position: absolute;
pointer-events: none;
}
}
.wallpapers-reset {
background: none;
border: none;
text-decoration: underline;
margin-inline: auto;
display: block;
font-size: var(--font-size-small);
color: var(--newtab-text-primary-color);
cursor: pointer;
&:hover {
text-decoration: none;
}
}