_Widgets.scss (3947B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 3 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .discovery-stream.ds-layout.ds-layout-widgets { 6 margin-inline: 0; 7 } 8 9 .widgets-wrapper { 10 margin-inline: auto; 11 padding-block-end: var(--space-large); 12 max-width: max-content; 13 } 14 15 .widgets-section-container { 16 padding-block: var(--space-xsmall) var(--space-large); 17 padding-inline: var(--space-large); 18 background-color: var(--button-background-color); 19 border-radius: var(--border-radius-large); 20 // Bug 1908010 - This overwrites the design system color because of a 21 // known transparency issue with color-mix syntax when a wallpaper is set 22 .lightWallpaper &, 23 .darkWallpaper & { 24 background-color: var(--newtab-weather-background-color); // stylelint-disable-line stylelint-plugin-mozilla/use-design-tokens 25 26 @media (prefers-contrast) { 27 background-color: var(--background-color-box); 28 } 29 } 30 31 .widgets-title-container { 32 display: flex; 33 justify-content: flex-end; 34 align-items: center; 35 gap: var(--space-medium); 36 37 h1 { 38 margin-inline-end: auto; 39 } 40 } 41 42 // Mirrors the grid-gap spacing used on 43 // .ds-outer-wrapper-breakpoint-override .ds-card-grid 44 @media(min-width: $break-point-widest) { 45 padding-block-end: var(--space-xlarge); 46 padding-inline: var(--space-xlarge); 47 } 48 49 // Sections Layout Override 50 .has-sections-grid & { 51 @media(min-width: $break-point-widest) { 52 padding-block-end: var(--space-large); 53 padding-inline: var(--space-large); 54 } 55 } 56 57 h1 { 58 font-size: var(--font-size-large); 59 font-weight: var(--font-weight-bold); 60 } 61 } 62 63 // Bug 1996308: This layout is somewhat brittle as the design dictates the parent container (.widgets-wrapper) 64 // be only as wide as the width of this container (.widgets-container) while still being responsive. 65 // Once we have four widgets, we can revert most of this logic as the container will be 100%. 66 .widgets-container { 67 --widgets-card-width: var(--newtab-card-grid-layout-width); 68 // This is the maximum number of widgets the Widgets row can support 69 --widgets-max-cols: 2; 70 --widgets-grid-gap: var(--space-large); 71 72 // Update the card width when Sections is enabled 73 .has-sections-grid & { 74 --widgets-card-width: var(--newtab-card-width-medium); 75 } 76 77 &:has(.lists), 78 &:has(.focus-timer) { 79 display: grid; 80 grid-template-columns: repeat(auto-fit, var(--widgets-card-width)); 81 gap: var(--widgets-grid-gap); 82 83 // The max-width logic is only necessary when displaying more than one column 84 @media(min-width: $break-point-medium) { 85 max-width: calc(var(--widgets-max-cols) * var(--widgets-card-width) + (var(--widgets-max-cols) - 1) * var(--widgets-grid-gap)); 86 justify-content: center; 87 } 88 89 // Mirrors the grid-gap spacing used on 90 // .ds-outer-wrapper-breakpoint-override .ds-card-grid 91 @media(min-width: $break-point-widest) { 92 --widgets-grid-gap: var(--space-xlarge); 93 } 94 95 // Sections Layout Override 96 .has-sections-grid & { 97 @media(min-width: $break-point-widest) { 98 --widgets-grid-gap: var(--space-large); 99 } 100 } 101 } 102 } 103 104 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper { 105 width: auto; 106 border-radius: var(--border-radius-medium); 107 108 .content-wrapper { 109 margin: 0; 110 padding: var(--space-medium); 111 } 112 113 .widget-highlight { 114 img { 115 border-radius: var(--border-radius-medium); 116 margin-block-end: var(--space-small); 117 } 118 119 h3 { 120 margin-block: 0 var(--space-xsmall); 121 font-size: var(--font-size-root); 122 } 123 124 p { 125 margin-block: 0; 126 font-size: var(--font-size-root); 127 } 128 } 129 130 .message-icon { 131 display: none; 132 } 133 134 moz-button { 135 position: absolute; 136 inset-inline-end: var(--space-medium); 137 inset-block-start: var(--space-medium); 138 } 139 }