Source code
Revision control
Copy as Markdown
Other Tools
@media (height < 700px) {
.personalize-button {
position: absolute;
top: 16px;
inset-inline-end: 16px;
}
}
@media (height >= 700px) {
.personalize-button {
position: fixed;
top: 16px;
inset-inline-end: 16px;
z-index: 1000;
}
}
.personalize-button {
border: 0;
border-radius: 4px;
background-color: transparent;
padding: 15px;
&:hover {
background-color: var(--newtab-element-hover-color);
}
&:active {
background-color: var(--newtab-element-active-color);
}
&:focus-visible {
@include ds-focus;
}
&.personalize-animate-exit-done {
visibility: hidden;
}
}
.customize-menu {
color: var(--newtab-text-primary-color);
background-color: var(--newtab-background-color-secondary);
width: 432px;
height: 100%;
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 1001;
padding-block: 0 var(--space-large);
padding-inline: var(--space-large);
overflow: auto;
transform: translateX(435px);
visibility: hidden;
cursor: default;
@media (prefers-reduced-motion: no-preference) {
// These first 2 classes happen only while the element is animating.
&.customize-animate-enter,
&.customize-animate-exit,
// We only add these so the css is visible for inspecting while not animating.
// Otherwise it's difficult to see and inspect this css because the transition is so fast.
&.customize-animate-enter-done,
&.customize-animate-exit-done {
transition: transform 250ms $customize-menu-slide-bezier, visibility 250ms;
}
}
@media (forced-colors: active) {
border-inline-start: solid 1px;
}
&:dir(rtl) {
transform: translateX(-435px);
}
&.customize-animate-enter-done,
&.customize-animate-enter-active {
box-shadow: $shadow-large;
visibility: visible;
transform: translateX(0);
}
&.customize-animate-exit-active {
box-shadow: $shadow-large;
}
.close-button-wrapper {
position: sticky;
top: var(--space-large);
margin-block-end: var(--space-large);
background-color: var(--newtab-background-color-secondary);
z-index: 1;
}
.close-button {
margin-inline-start: auto;
margin-inline-end: var(--space-large);
white-space: nowrap;
display: block;
background-color: var(--newtab-element-secondary-color);
padding: 8px 10px;
border: $customize-menu-border-tint;
border-radius: 4px;
color: var(--newtab-text-primary-color);
font-size: 13px;
font-weight: 600;
}
.close-button:hover {
background-color: var(--newtab-element-secondary-hover-color);
}
.close-button:hover:active {
background-color: var(--newtab-element-secondary-active-color);
}
}
.grid-skip {
display: contents;
}
.home-section {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
grid-row-gap: 32px;
padding: var(--space-large);
.wallpapers-section h2 {
font-size: inherit;
}
.section {
moz-toggle {
margin-bottom: 10px;
}
.sponsored {
font-size: 14px;
margin-inline-start: 5px;
}
.check-wrapper {
position: relative;
}
.sponsored-checkbox {
margin-inline-start: 2px;
width: 16px;
height: 16px;
vertical-align: middle;
border: $customize-menu-border-tint;
box-sizing: border-box;
border-radius: 4px;
appearance: none;
background-color: var(--newtab-element-secondary-color);
&:hover {
background-color: var(--newtab-element-secondary-hover-color);
}
}
.sponsored-checkbox:checked {
-moz-context-properties: fill;
fill: var(--newtab-primary-element-text-color);
background-color: var(--newtab-primary-action-background);
&:hover {
background-color: var(--newtab-primary-element-hover-color);
}
&:active {
background-color: var(--newtab-primary-element-active-color);
}
@media (forced-colors: active) {
fill: $black;
}
}
.sponsored-checkbox:active + .checkmark {
fill: var(--newtab-element-secondary-color);
}
.selector {
color: var(--newtab-text-primary-color);
width: 118px;
display: block;
border: 1px solid var(--newtab-border-color);
border-radius: 4px;
appearance: none;
padding-block: 7px;
padding-inline: 10px 13px;
margin-inline-start: 2px;
margin-bottom: 2px;
-moz-context-properties: fill;
fill: var(--newtab-text-primary-color);
background-size: 8px;
background-origin: content-box;
background-color: var(--newtab-background-color-secondary);
&:hover {
background-color: var(--newtab-element-secondary-hover-color);
}
&:dir(rtl) {
background-position-x: left;
}
}
.more-info-top-wrapper,
.more-info-pocket-wrapper {
margin-inline-start: -2px;
overflow: hidden;
.more-information {
position: relative;
transition: margin-top 250ms $customize-menu-expand-bezier;
}
}
.more-info-top-wrapper {
.check-wrapper {
margin-top: 10px;
}
}
}
.sponsored-content-info {
display: flex;
gap: var(--space-small);
font-size: var(--font-size-small);
border-radius: var(--border-radius-medium);
background-color: var(--newtab-element-secondary-color);
padding: var(--space-small) var(--space-large);
.icon-help {
flex-shrink: 0;
color: var(--color-accent-primary);
height: 20px;
}
a {
color: var(--newtab-primary-action-background);
}
}
.divider {
border-top: 1px var(--newtab-border-color) solid;
margin: 0 -16px;
}
.external-link {
font-size: 14px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-moz-context-properties: fill;
fill: var(--newtab-text-primary-color);
background-size: 16px;
padding-inline-start: 21px;
margin-bottom: 20px;
text-decoration: underline;
@media (forced-colors: active) {
padding: 8px 10px;
padding-inline-start: 21px;
}
&:dir(rtl) {
background-position-x: right;
}
}
.external-link:hover {
text-decoration: none;
}
}
.home-section .section .sponsored-checkbox:focus-visible,
.selector:focus-visible,
.external-link:focus-visible,
.close-button:focus-visible {
border: 1px solid var(--newtab-primary-action-background);
outline: 0;
box-shadow: $shadow-focus;
}