_CustomizeMenu.scss (14227B)
1 .personalizeButtonWrapper { 2 margin: 0; 3 padding: 0; 4 // z-index note: menu should cover fixed search bar and asrouter dev tools toggle button 5 z-index: 5; 6 position: fixed; 7 inset-block-end: var(--space-xlarge); 8 inset-inline-end: var(--space-xlarge); 9 } 10 11 .personalize-button { 12 border: 0; 13 border-radius: var(--border-radius-small); 14 background-color: var(--button-background-color, rgba(21, 20, 26, 7%)); 15 box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 20%); 16 padding: calc(5 * var(--space-xxsmall)); 17 position: relative; 18 background-size: var(--icon-size-medium); 19 background-position: center; 20 display: flex; 21 align-items: center; 22 overflow: hidden; 23 transition: background-color 0.3s ease; 24 25 .lightWallpaper &, 26 .darkWallpaper & { 27 background-color: var(--newtab-weather-background-color); 28 29 @media (prefers-contrast) { 30 background-color: var(--background-color-box); 31 } 32 } 33 34 &:hover { 35 background-color: var(--newtab-button-static-hover-background); 36 } 37 38 &:active { 39 background-color: var(--newtab-button-static-active-background); 40 } 41 42 &:focus-visible { 43 @include ds-focus; 44 45 background-color: var(--newtab-button-static-active-background); 46 } 47 48 &.personalize-animate-exit-done { 49 visibility: hidden; 50 } 51 52 > div { 53 width: var(--icon-size-medium); 54 height: var(--icon-size-medium); 55 display: flex; 56 align-items: center; 57 justify-content: center; 58 flex-shrink: 0; 59 60 > img { 61 -moz-context-properties: fill; 62 display: inline-block; 63 color: var(--icon-color); 64 fill: currentColor; 65 height: 100%; 66 object-fit: contain; 67 vertical-align: middle; 68 width: 100%; 69 } 70 } 71 72 > label { 73 margin-inline-end: 0; 74 opacity: 0; 75 white-space: nowrap; 76 overflow: hidden; 77 max-width: 0; 78 transition: 79 opacity 0.3s ease, 80 margin 0.3s ease, 81 max-width 0.3s ease; 82 } 83 } 84 85 .personalize-button:hover, 86 .personalize-button:focus-visible { 87 > label { 88 opacity: 1; 89 margin-inline-end: var(--space-medium); 90 // CSS animations can only transition between fixed values; 91 // 30ch is enough to accommodate longest localized string (Bulgarian: 15ch) 92 max-width: 30ch; 93 } 94 } 95 96 .customize-menu-animate-wrapper { 97 color: var(--newtab-text-primary-color); 98 background-color: var(--newtab-background-color-secondary); 99 width: 432px; 100 height: 100%; 101 // Becomes block after first open; never reset (see .customize-animate-enter/exit) 102 display: none; 103 position: fixed; 104 inset-block: 0; 105 inset-inline-end: 0; 106 z-index: 1001; 107 padding-block: 0 var(--space-large); 108 padding-inline: var(--space-large); 109 transform: translateX(435px); 110 visibility: hidden; 111 cursor: default; 112 113 &.customize-animate-enter, 114 &.customize-animate-exit, 115 &.customize-animate-enter-done, 116 &.customize-animate-exit-done { 117 // display: none avoids initial load cost 118 // Stays as display: block after initial load 119 display: block; 120 } 121 122 @media (prefers-reduced-motion: no-preference) { 123 // We need customize-animate-enter and customize-animate-exit to fix bug 1868232 124 // These first 2 classes happen only while the element is animating. 125 &.customize-animate-enter, 126 &.customize-animate-exit, 127 // We only add these so the css is visible for inspecting while not animating. 128 // Otherwise it's difficult to see and inspect this css because the transition is so fast. 129 &.customize-animate-enter-done, 130 &.customize-animate-exit-done { 131 transition: transform 250ms $customize-menu-slide-bezier, visibility 250ms; 132 } 133 } 134 135 @media (forced-colors: active) { 136 border-inline-start: solid 1px; 137 } 138 139 &:dir(rtl) { 140 transform: translateX(-435px); 141 } 142 143 &.customize-animate-enter-done, 144 &.customize-animate-enter-active { 145 box-shadow: $shadow-large; 146 visibility: visible; 147 transform: translateX(0); 148 } 149 150 &.customize-animate-exit-active { 151 box-shadow: $shadow-large; 152 } 153 } 154 155 .customize-menu { 156 overflow: auto; 157 height: 100%; 158 159 &.subpanel-open { 160 overflow: clip; 161 } 162 163 .close-button-wrapper { 164 position: sticky; 165 inset-block-start: 0; 166 padding-block-start: var(--space-large); 167 background-color: var(--newtab-background-color-secondary); 168 z-index: 1; 169 170 moz-button { 171 margin-inline-start: auto; 172 margin-inline-end: var(--space-large); 173 display: block; 174 } 175 } 176 177 *:focus-visible { 178 outline: var(--focus-outline); 179 } 180 } 181 182 .grid-skip { 183 display: contents; 184 } 185 186 .home-section { 187 display: grid; 188 grid-template-columns: 1fr; 189 grid-template-rows: repeat(4, auto); 190 grid-row-gap: var(--space-xxlarge); 191 padding-block: var(--space-xsmall) var(--space-large); 192 padding-inline: var(--space-large); 193 194 .wallpapers-section h2 { 195 font-size: inherit; 196 } 197 198 .widgets-section h2 { 199 font-size: inherit; 200 margin-block-start: 0; 201 font-weight: var(--heading-font-weight); 202 } 203 204 .settings-widgets, 205 .settings-toggles { 206 display: flex; 207 flex-direction: column; 208 gap: var(--space-xlarge); 209 } 210 211 .settings-widgets { 212 gap: var(--space-large); 213 214 .divider { 215 margin-block-start: var(--space-large); 216 } 217 } 218 219 [slot='nested'] { 220 margin-block-start: 0; 221 } 222 223 .section { 224 .customize-menu-checkbox-label { 225 font-size: inherit; 226 margin-inline-start: var(--space-xsmall); 227 } 228 229 .check-wrapper { 230 position: relative; 231 display: flex; 232 } 233 234 .customize-menu-checkbox { 235 margin-inline-start: var(--space-xxsmall); 236 width: 16px; 237 height: 16px; 238 vertical-align: middle; 239 border: $customize-menu-border-tint; 240 box-sizing: border-box; 241 border-radius: var(--border-radius-small); 242 appearance: none; 243 background-color: var(--newtab-element-secondary-color); 244 flex-shrink: 0; 245 246 &:hover { 247 background-color: var(--newtab-element-secondary-hover-color); 248 } 249 } 250 251 .customize-menu-checkbox:checked { 252 -moz-context-properties: fill; 253 fill: var(--newtab-primary-element-text-color); 254 background: url('chrome://global/skin/icons/check.svg') center no-repeat; 255 background-color: var(--newtab-primary-action-background); 256 257 &:hover { 258 background-color: var(--newtab-primary-element-hover-color); 259 } 260 261 &:active { 262 background-color: var(--newtab-primary-element-active-color); 263 } 264 265 @media (forced-colors: active) { 266 fill: $black; 267 } 268 } 269 270 .customize-menu-checkbox:active + .checkmark { 271 fill: var(--newtab-element-secondary-color); 272 } 273 274 .selector { 275 color: var(--newtab-text-primary-color); 276 width: 118px; 277 display: block; 278 border: 1px solid var(--border-color); 279 border-radius: var(--border-radius-small); 280 appearance: none; 281 padding-block: var(--space-small); 282 padding-inline: var(--space-small) var(--space-medium); 283 margin-inline-start: var(--space-xxsmall); 284 margin-block-end: var(--space-xxsmall); 285 -moz-context-properties: fill; 286 fill: var(--newtab-text-primary-color); 287 background: url('chrome://global/skin/icons/arrow-down-12.svg') right no-repeat; 288 background-size: 8px; 289 background-origin: content-box; 290 background-color: var(--newtab-background-color-secondary); 291 292 &:hover { 293 background-color: var(--newtab-element-secondary-hover-color); 294 } 295 296 &:dir(rtl) { 297 background-position-x: left; 298 } 299 } 300 301 .more-info-top-wrapper, 302 .more-info-pocket-wrapper { 303 margin-inline-start: calc(var(--space-xxsmall) * -1); 304 overflow: hidden; 305 306 .more-information { 307 position: relative; 308 transition: margin-block-start 250ms $customize-menu-expand-bezier; 309 } 310 } 311 312 .more-info-pocket-wrapper { 313 .more-information { 314 // Note: This is necessary so the follow/block topics panel can 315 // be positioned absolutely across the entire Customize menu 316 position: static; 317 } 318 319 .check-wrapper { 320 margin-block-end: var(--space-small); 321 } 322 323 // Prevent focus outline clipping by allowing overflow 324 &:has(moz-box-button:focus-within) { 325 overflow: visible; 326 } 327 } 328 329 .more-info-top-wrapper { 330 .check-wrapper { 331 margin-block-start: var(--space-large); 332 } 333 } 334 } 335 336 .sponsored-content-info { 337 display: flex; 338 gap: var(--space-small); 339 font-size: var(--font-size-small); 340 border-radius: var(--border-radius-medium); 341 background-color: var(--newtab-element-secondary-color); 342 padding: var(--space-small) var(--space-large); 343 344 .icon-help { 345 flex-shrink: 0; 346 color: var(--color-accent-primary); 347 height: 20px; 348 } 349 350 a { 351 color: var(--newtab-primary-action-background); 352 } 353 } 354 355 .divider { 356 border-block-start: 1px var(--border-color) solid; 357 margin: 0 calc(var(--space-large) * -1); 358 } 359 360 .external-link { 361 -moz-context-properties: fill; 362 background: url('chrome://global/skin/icons/settings.svg') left no-repeat; 363 background-size: 16px; 364 border: 1px solid transparent; 365 border-radius: var(--border-radius-small); 366 color: var(--link-color); 367 cursor: pointer; 368 fill: var(--link-color); 369 font-size: var(--font-size-small); 370 margin-block-end: var(--space-large); 371 padding-inline-start: var(--space-xlarge); 372 text-decoration: underline; 373 374 &:hover { 375 color: var(--link-color-hover); 376 text-decoration: none; 377 } 378 379 &:active { 380 color: var(--link-color-active); 381 } 382 383 @media (forced-colors: active) { 384 padding: var(--space-small) var(--space-medium); 385 padding-inline-start: var(--space-xlarge); 386 } 387 388 &:dir(rtl) { 389 background-position-x: right; 390 } 391 } 392 393 .external-link:hover { 394 text-decoration: none; 395 } 396 } 397 398 .external-link:focus-visible, 399 .close-button:focus-visible { 400 border: 1px solid var(--newtab-primary-action-background); 401 outline: 0; 402 box-shadow: $shadow-focus; 403 } 404 405 // Make sure form elements under the "Shortcuts" subsection don't change position on focus 406 // by always having a 2px box shadow around them - one that blends in with the background. 407 .home-section .section { 408 .customize-menu-checkbox, .selector { 409 outline: 0; 410 box-shadow: 0 0 0 2px light-dark(var(--newtab-background-color), var(--newtab-background-color-dark)); 411 } 412 } 413 414 // Move the Shortcuts dropdown slightly down so that the box shadow is not cut off at the top 415 // in active & focus states. 416 .home-section .section .selector { 417 margin-block-start: var(--space-xxsmall) 418 } 419 420 // Improve accessibility of shortcuts dropdown and sponsored shortcuts checkbox 421 // by setting a bright 2px box shadow in active and focus states. 422 .home-section .section 423 { 424 .customize-menu-checkbox, .selector { 425 &:is(:focus-visible) { 426 box-shadow: 0 0 0 2px var(--color-accent-primary); 427 outline: var(--focus-outline); // For Windows high-contrast mode 428 } 429 430 &:is(:active) { 431 box-shadow: 0 0 0 2px var(--color-accent-primary-active); 432 outline: 0; 433 } 434 } 435 } 436 437 .sections-mgmt-panel { 438 height: 100%; 439 // Width of panel minus the margins 440 inset-inline-start: var(--space-xlarge); 441 position: absolute; 442 inset-block-start: 0; 443 width: 380px; 444 z-index: 2; 445 transform: translateX(100%); 446 margin-block: var(--space-large) 0; 447 padding: 0; 448 background-color: var(--newtab-background-color-secondary); 449 overflow-y: auto; 450 451 &:dir(rtl) { 452 transform: translateX(-100%); 453 } 454 455 @media (prefers-reduced-motion: no-preference) { 456 &.sections-mgmt-panel-enter, 457 &.sections-mgmt-panel-exit, 458 &.sections-mgmt-panel-enter-done, 459 &.sections-mgmt-panel-exit-done { 460 transition: transform 300ms; 461 } 462 } 463 464 &.sections-mgmt-panel-enter-done, 465 &.sections-mgmt-panel-enter-active { 466 transform: translateX(0); 467 } 468 469 // Typography 470 h3 { 471 font-size: inherit; 472 margin-block: 0 var(--space-small); 473 } 474 475 // List 476 .topic-list { 477 list-style: none; 478 display: flex; 479 flex-direction: column; 480 gap: var(--space-small); 481 margin-block: 0 var(--space-xxlarge); 482 padding-inline: 0; 483 width: 100%; 484 485 li { 486 display: flex; 487 justify-content: space-between; 488 align-items: center; 489 } 490 } 491 492 .topic-list-empty-state { 493 display: block; 494 margin-block-end: var(--space-xxlarge); 495 color: var(--text-color-deemphasized); 496 } 497 498 // Buttons 499 .arrow-button { 500 background: url('chrome://global/skin/icons/arrow-left.svg') no-repeat left center; 501 502 &:dir(rtl) { 503 background: url('chrome://global/skin/icons/arrow-right.svg') no-repeat right center; 504 } 505 506 border: none; 507 cursor: pointer; 508 margin-block-end: var(--space-xlarge); 509 padding-inline-start: var(--space-xlarge); 510 -moz-context-properties: fill; 511 fill: currentColor; 512 min-height: var(--size-item-small); 513 margin-inline-start: var(--space-xsmall); 514 margin-block-start: var(--space-xsmall); 515 516 h1 { 517 font-size: var(--font-size-root); 518 margin-block: 0; 519 font-weight: var(--button-font-weight); 520 } 521 522 } 523 524 // Follow / Unfollow and Block / Unblock Buttons 525 .section-block, 526 .section-follow { 527 .section-button-blocked-text, 528 .section-button-following-text { 529 display: none; 530 } 531 532 .section-button-unblock-text, 533 .section-button-unfollow-text { 534 display: none; 535 } 536 537 &.following { 538 .section-button-follow-text { 539 display: none; 540 } 541 542 .section-button-following-text { 543 display: block; 544 } 545 } 546 547 &.following:not(:hover) { 548 moz-button { 549 --button-background-color-destructive: var(--button-background-color); 550 --button-text-color-destructive: var(--button-text-color); 551 --button-border-color-destructive: var(--button-border-color); 552 } 553 } 554 555 &.following:hover { 556 .section-button-following-text { 557 display: none; 558 } 559 560 .section-button-unfollow-text { 561 display: block; 562 } 563 } 564 565 &.blocked { 566 .section-button-block-text { 567 display: none; 568 } 569 570 .section-button-blocked-text { 571 display: block; 572 } 573 } 574 575 &.blocked:hover { 576 .section-button-blocked-text { 577 display: none; 578 } 579 580 .section-button-unblock-text { 581 display: block; 582 } 583 } 584 } 585 586 }