aboutwelcome.css (149835B)
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 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 /* stylelint-disable max-nesting-depth */ 5 #feature-callout { 6 --fc-background: var(--fc-background-light, #FFF); 7 --fc-color: var(--fc-color-light, rgb(21, 20, 26)); 8 --fc-border: var(--fc-border-light, #CFCFD8); 9 --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224)); 10 --fc-button-background: var(--fc-button-background-light, #F0F0F4); 11 --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26)); 12 --fc-button-border: var(--fc-button-border-light, transparent); 13 --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6); 14 --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26)); 15 --fc-button-border-hover: var(--fc-button-border-hover-light, transparent); 16 --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8); 17 --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26)); 18 --fc-button-border-active: var(--fc-button-border-active-light, transparent); 19 --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0); 20 --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254)); 21 --fc-primary-button-border: var(--fc-primary-button-border-light, transparent); 22 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB); 23 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254)); 24 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent); 25 --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94); 26 --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254)); 27 --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent); 28 --fc-step-color: color-mix(in srgb, currentColor 50%, transparent); 29 --fc-link-color: var(--fc-link-color-light, #0061E0); 30 --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB); 31 --fc-link-color-active: var(--fc-link-color-active-light, #053E94); 32 --fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2); 33 --fc-dismiss-button-background: var(--fc-dismiss-button-background-light, #FFF); 34 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-light, color-mix(in srgb, currentColor 14%, #FFF)); 35 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-light, color-mix(in srgb, currentColor 14%, #FFF)); 36 position: absolute; 37 z-index: 2147483647; 38 outline: none; 39 color: var(--fc-color); 40 accent-color: var(--fc-accent-color); 41 -moz-theme: non-native; 42 -moz-window-shadow: none; 43 --arrow-width: 33.9411px; 44 --arrow-square-size: calc(var(--arrow-width) / sqrt(2)); 45 --extra-width-from-rotation: calc(var(--arrow-width) - var(--arrow-square-size)); 46 --arrow-visible-height: calc(var(--arrow-width) / 2); 47 --arrow-visible-size: calc(var(--arrow-square-size) / 2); 48 --arrow-center-inset: calc(50% - var(--arrow-visible-size)); 49 --arrow-offset: calc(1.5px - var(--arrow-visible-size)); 50 --arrow-corner-distance: 12px; 51 --arrow-corner-inset: calc(var(--arrow-corner-distance) + (var(--extra-width-from-rotation) / 2)); 52 --arrow-overlap-magnitude: 5px; 53 --button-min-height: 24px; 54 } 55 @media (prefers-color-scheme: dark) { 56 #feature-callout { 57 --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); 58 --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); 59 --fc-border: var(--fc-border-dark, #3A3944); 60 --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); 61 --fc-button-background: var(--fc-button-background-dark, #2B2A33); 62 --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); 63 --fc-button-border: var(--fc-button-border-dark, transparent); 64 --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); 65 --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); 66 --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); 67 --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); 68 --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); 69 --fc-button-border-active: var(--fc-button-border-active-dark, transparent); 70 --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); 71 --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); 72 --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); 73 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); 74 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); 75 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); 76 --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); 77 --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); 78 --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); 79 --fc-link-color: var(--fc-link-color-dark, #00DDFF); 80 --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); 81 --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); 82 --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD); 83 --fc-dismiss-button-background: var(--fc-dismiss-button-background-dark, rgb(66, 65, 77)); 84 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 85 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 86 } 87 } 88 :root[lwt-popup=light] #feature-callout:not(.simulateContent) { 89 color-scheme: light; 90 --fc-background: var(--fc-background-light, #FFF); 91 --fc-color: var(--fc-color-light, rgb(21, 20, 26)); 92 --fc-border: var(--fc-border-light, #CFCFD8); 93 --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224)); 94 --fc-button-background: var(--fc-button-background-light, #F0F0F4); 95 --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26)); 96 --fc-button-border: var(--fc-button-border-light, transparent); 97 --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6); 98 --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26)); 99 --fc-button-border-hover: var(--fc-button-border-hover-light, transparent); 100 --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8); 101 --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26)); 102 --fc-button-border-active: var(--fc-button-border-active-light, transparent); 103 --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0); 104 --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254)); 105 --fc-primary-button-border: var(--fc-primary-button-border-light, transparent); 106 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB); 107 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254)); 108 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent); 109 --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94); 110 --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254)); 111 --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent); 112 --fc-step-color: color-mix(in srgb, currentColor 50%, transparent); 113 --fc-link-color: var(--fc-link-color-light, #0061E0); 114 --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB); 115 --fc-link-color-active: var(--fc-link-color-active-light, #053E94); 116 --fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2); 117 --fc-dismiss-button-background: var(--fc-dismiss-button-background-light, #FFF); 118 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-light, color-mix(in srgb, currentColor 14%, #FFF)); 119 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-light, color-mix(in srgb, currentColor 14%, #FFF)); 120 } 121 122 :root[lwt-popup=dark] #feature-callout:not(.simulateContent) { 123 color-scheme: dark; 124 --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); 125 --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); 126 --fc-border: var(--fc-border-dark, #3A3944); 127 --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); 128 --fc-button-background: var(--fc-button-background-dark, #2B2A33); 129 --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); 130 --fc-button-border: var(--fc-button-border-dark, transparent); 131 --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); 132 --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); 133 --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); 134 --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); 135 --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); 136 --fc-button-border-active: var(--fc-button-border-active-dark, transparent); 137 --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); 138 --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); 139 --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); 140 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); 141 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); 142 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); 143 --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); 144 --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); 145 --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); 146 --fc-link-color: var(--fc-link-color-dark, #00DDFF); 147 --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); 148 --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); 149 --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD); 150 --fc-dismiss-button-background: var(--fc-dismiss-button-background-dark, rgb(66, 65, 77)); 151 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 152 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 153 } 154 155 @media (prefers-contrast) { 156 #feature-callout { 157 --fc-background: var(--fc-background-hcm, -moz-dialog); 158 --fc-color: var(--fc-color-hcm, -moz-dialogtext); 159 --fc-border: var(--fc-border-hcm, -moz-dialogtext); 160 --fc-accent-color: var(--fc-accent-color-hcm, LinkText); 161 --fc-button-background: var(--fc-button-background-hcm, ButtonFace); 162 --fc-button-color: var(--fc-button-color-hcm, ButtonText); 163 --fc-button-border: var(--fc-button-border-hcm, ButtonText); 164 --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText); 165 --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace); 166 --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText); 167 --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText); 168 --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace); 169 --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText); 170 --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText); 171 --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace); 172 --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace); 173 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem); 174 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText); 175 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText); 176 --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText); 177 --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem); 178 --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem); 179 --fc-step-color: var(--fc-accent-color-hcm, LinkText); 180 --fc-link-color: var(--fc-link-color-hcm, LinkText); 181 --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText); 182 --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText); 183 --fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText); 184 --fc-dismiss-button-background: var(--fc-dismiss-button-background-hcm, -moz-dialog); 185 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-hcm, color-mix(in srgb, currentColor 14%, SelectedItem)); 186 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-hcm, color-mix(in srgb, currentColor 14%, SelectedItem)); 187 } 188 } 189 #feature-callout.simulateContent { 190 color-scheme: env(-moz-content-preferred-color-scheme); 191 } 192 @media (-moz-content-prefers-color-scheme: light) { 193 #feature-callout.simulateContent { 194 --fc-background: var(--fc-background-light, #FFF); 195 --fc-color: var(--fc-color-light, rgb(21, 20, 26)); 196 --fc-border: var(--fc-border-light, #CFCFD8); 197 --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224)); 198 --fc-button-background: var(--fc-button-background-light, #F0F0F4); 199 --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26)); 200 --fc-button-border: var(--fc-button-border-light, transparent); 201 --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6); 202 --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26)); 203 --fc-button-border-hover: var(--fc-button-border-hover-light, transparent); 204 --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8); 205 --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26)); 206 --fc-button-border-active: var(--fc-button-border-active-light, transparent); 207 --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0); 208 --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254)); 209 --fc-primary-button-border: var(--fc-primary-button-border-light, transparent); 210 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB); 211 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254)); 212 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent); 213 --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94); 214 --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254)); 215 --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent); 216 --fc-step-color: color-mix(in srgb, currentColor 50%, transparent); 217 --fc-link-color: var(--fc-link-color-light, #0061E0); 218 --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB); 219 --fc-link-color-active: var(--fc-link-color-active-light, #053E94); 220 --fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2); 221 --fc-dismiss-button-background: var(--fc-dismiss-button-background-light, #FFF); 222 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-light, color-mix(in srgb, currentColor 14%, #FFF)); 223 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-light, color-mix(in srgb, currentColor 14%, #FFF)); 224 } 225 } 226 @media (-moz-content-prefers-color-scheme: dark) { 227 #feature-callout.simulateContent { 228 --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); 229 --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); 230 --fc-border: var(--fc-border-dark, #3A3944); 231 --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); 232 --fc-button-background: var(--fc-button-background-dark, #2B2A33); 233 --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); 234 --fc-button-border: var(--fc-button-border-dark, transparent); 235 --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); 236 --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); 237 --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); 238 --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); 239 --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); 240 --fc-button-border-active: var(--fc-button-border-active-dark, transparent); 241 --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); 242 --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); 243 --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); 244 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); 245 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); 246 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); 247 --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); 248 --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); 249 --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); 250 --fc-link-color: var(--fc-link-color-dark, #00DDFF); 251 --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); 252 --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); 253 --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD); 254 --fc-dismiss-button-background: var(--fc-dismiss-button-background-dark, rgb(66, 65, 77)); 255 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 256 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 257 } 258 } 259 :root[lwt-newtab-brighttext] #feature-callout.simulateContent.lwtNewtab { 260 color-scheme: dark; 261 --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); 262 --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); 263 --fc-border: var(--fc-border-dark, #3A3944); 264 --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); 265 --fc-button-background: var(--fc-button-background-dark, #2B2A33); 266 --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); 267 --fc-button-border: var(--fc-button-border-dark, transparent); 268 --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); 269 --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); 270 --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); 271 --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); 272 --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); 273 --fc-button-border-active: var(--fc-button-border-active-dark, transparent); 274 --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); 275 --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); 276 --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); 277 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); 278 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); 279 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); 280 --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); 281 --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); 282 --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); 283 --fc-link-color: var(--fc-link-color-dark, #00DDFF); 284 --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); 285 --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); 286 --fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD); 287 --fc-dismiss-button-background: var(--fc-dismiss-button-background-dark, rgb(66, 65, 77)); 288 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 289 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77))); 290 } 291 292 @media (prefers-contrast) { 293 #feature-callout.simulateContent { 294 --fc-background: var(--fc-background-hcm, -moz-dialog); 295 --fc-color: var(--fc-color-hcm, -moz-dialogtext); 296 --fc-border: var(--fc-border-hcm, -moz-dialogtext); 297 --fc-accent-color: var(--fc-accent-color-hcm, LinkText); 298 --fc-button-background: var(--fc-button-background-hcm, ButtonFace); 299 --fc-button-color: var(--fc-button-color-hcm, ButtonText); 300 --fc-button-border: var(--fc-button-border-hcm, ButtonText); 301 --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText); 302 --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace); 303 --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText); 304 --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText); 305 --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace); 306 --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText); 307 --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText); 308 --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace); 309 --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace); 310 --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem); 311 --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText); 312 --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText); 313 --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText); 314 --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem); 315 --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem); 316 --fc-step-color: var(--fc-accent-color-hcm, LinkText); 317 --fc-link-color: var(--fc-link-color-hcm, LinkText); 318 --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText); 319 --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText); 320 --fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText); 321 --fc-dismiss-button-background: var(--fc-dismiss-button-background-hcm, -moz-dialog); 322 --fc-dismiss-button-background-hover: var(--fc-dismiss-button-background-hover-hcm, color-mix(in srgb, currentColor 14%, SelectedItem)); 323 --fc-dismiss-button-background-active: var(--fc-dismiss-button-background-active-hcm, color-mix(in srgb, currentColor 14%, SelectedItem)); 324 } 325 } 326 panel#feature-callout { 327 --panel-color: var(--fc-color); 328 --panel-shadow: none; 329 --panel-shadow-margin: 6px; 330 --panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px); 331 --panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2))); 332 } 333 334 panel#feature-callout::part(content) { 335 width: initial; 336 border: 0; 337 border-radius: 0; 338 padding: 0; 339 margin: var(--panel-shadow-margin); 340 background: none; 341 color: inherit; 342 overflow: visible !important; 343 } 344 345 div#feature-callout { 346 transition: opacity 0.5s ease; 347 } 348 div#feature-callout.hidden { 349 opacity: 0; 350 pointer-events: none; 351 } 352 353 #feature-callout .onboardingContainer, 354 #feature-callout .onboardingContainer .outer-wrapper { 355 --transition: none; 356 height: auto; 357 transform: none; 358 } 359 #feature-callout .screen:dir(rtl) { 360 transform: none; 361 } 362 #feature-callout .screen[pos=callout] { 363 height: fit-content; 364 min-height: unset; 365 overflow: visible; 366 } 367 #feature-callout .screen[pos=callout][layout=inline] .section-main .main-content, 368 #feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps { 369 width: 18em; 370 padding-inline: 16px; 371 padding-block: 0; 372 } 373 #feature-callout .screen[pos=callout][layout=inline] .section-main .main-content .welcome-text, 374 #feature-callout .screen[pos=callout][layout=inline] .section-main .main-content.no-steps .welcome-text { 375 height: 24px; 376 margin-block: 12px; 377 margin-inline: 0; 378 padding: 0; 379 white-space: nowrap; 380 } 381 #feature-callout .screen[pos=callout][layout=inline] .section-main .dismiss-button { 382 height: 24px; 383 width: 24px; 384 min-height: 24px; 385 min-width: 24px; 386 margin: 0; 387 top: calc(50% - 12px); 388 inset-inline-end: 12px; 389 } 390 #feature-callout .screen[pos=callout] .logo-container { 391 display: flex; 392 justify-content: center; 393 } 394 #feature-callout .screen[pos=callout] .logo-container .brand-logo { 395 margin: 0; 396 } 397 #feature-callout .screen[pos=callout] .logo-container .brand-logo:dir(rtl) { 398 transform: rotateY(180deg); 399 } 400 #feature-callout .screen[pos=callout] .welcome-text { 401 align-items: start; 402 text-align: start; 403 margin: 0; 404 padding: 0; 405 gap: 8px; 406 } 407 #feature-callout .screen[pos=callout] .welcome-text h1, 408 #feature-callout .screen[pos=callout] .welcome-text h2 { 409 font-size: 0.813em; 410 margin: 0; 411 color: inherit; 412 } 413 #feature-callout .screen[pos=callout] .welcome-text h1 { 414 font-weight: var(--heading-font-weight); 415 } 416 #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container { 417 display: flex; 418 flex-flow: row wrap; 419 align-items: center; 420 } 421 #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container { 422 height: 16px; 423 width: 16px; 424 margin-inline-end: 6px; 425 box-sizing: border-box; 426 -moz-context-properties: fill; 427 fill: currentColor; 428 } 429 #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container .logo-container img { 430 height: 16px; 431 width: 16px; 432 margin: 0; 433 } 434 #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top], #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] { 435 flex-wrap: nowrap; 436 } 437 #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] .logo-container, #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] .logo-container { 438 height: 1.5em; 439 align-items: center; 440 padding-bottom: 0.15em; 441 box-sizing: border-box; 442 } 443 #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=top] { 444 align-items: start; 445 } 446 #feature-callout .screen[pos=callout] .welcome-text .inline-icon-container[alignment=bottom] { 447 align-items: end; 448 } 449 #feature-callout .screen[pos=callout] #content-tiles-container { 450 display: flex; 451 flex-direction: column; 452 margin: 0; 453 } 454 #feature-callout .screen[pos=callout] #content-tiles-container .content-tile .content-title-container { 455 margin-block: inherit; 456 } 457 #feature-callout .screen[pos=callout] #content-tiles-container .content-tile .multi-select-container { 458 padding: 12px 0 0; 459 } 460 #feature-callout .screen[pos=callout] #content-tiles-container .content-tile:not(:last-child) { 461 margin-block: 0 20px; 462 } 463 #feature-callout .screen[pos=callout] #content-tiles-container .tile-title { 464 font-size: 0.813em; 465 } 466 #feature-callout .screen[pos=callout] #content-tiles-container .tile-title-container { 467 margin-block: initial; 468 } 469 #feature-callout .screen[pos=callout] .multi-select-container { 470 margin: 0; 471 font-size: 0.813em; 472 row-gap: 12px; 473 color: inherit; 474 overflow: visible; 475 } 476 #feature-callout .screen[pos=callout] .multi-select-container #multi-stage-multi-select-label { 477 font-size: inherit; 478 margin: -4px 0 0; 479 color: inherit; 480 } 481 #feature-callout .screen[pos=callout] .cta-link { 482 background: none; 483 text-decoration: underline; 484 cursor: pointer; 485 border: none; 486 padding: 0; 487 color: var(--fc-link-color); 488 order: -1; 489 margin-inline-end: auto; 490 margin-block: 8px; 491 } 492 #feature-callout .screen[pos=callout] .cta-link:hover { 493 color: var(--fc-link-color-hover); 494 } 495 #feature-callout .screen[pos=callout] .cta-link:active { 496 color: var(--fc-link-color-active); 497 } 498 #feature-callout .screen[pos=callout] .section-secondary { 499 display: none; 500 } 501 #feature-callout .screen[pos=callout] .section-main { 502 height: fit-content; 503 width: fit-content; 504 } 505 #feature-callout .screen[pos=callout] .section-main .main-content { 506 position: relative; 507 overflow: hidden; 508 border: 1px solid var(--fc-border); 509 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); 510 border-radius: 4px; 511 padding: var(--callout-padding, 16px); 512 width: 25em; 513 gap: 16px; 514 background: var(--fc-background); 515 } 516 #feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner { 517 gap: 12px; 518 } 519 #feature-callout .screen[pos=callout] .section-main .main-content .main-content-inner .legal-paragraph .text-link { 520 color: var(--fc-color); 521 } 522 #feature-callout .screen[pos=callout] .section-main .main-content .steps { 523 height: auto; 524 position: absolute; 525 bottom: calc(var(--callout-padding, 16px) + var(--cta-height, 24px) / 2 - 4px); 526 padding-block: 0; 527 } 528 #feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator { 529 border: 4px solid var(--fc-step-color); 530 } 531 #feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current { 532 border-color: var(--fc-accent-color); 533 } 534 #feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) { 535 flex-flow: row nowrap; 536 gap: 8px; 537 } 538 #feature-callout .screen[pos=callout] .section-main .main-content .steps:not(.progress-bar) .indicator { 539 margin: 0; 540 } 541 #feature-callout .screen[pos=callout] .section-main .main-content .steps .indicator.current, #feature-callout .screen[pos=callout] .section-main .main-content .steps.progress-bar .indicator.complete { 542 border-color: var(--fc-accent-color); 543 } 544 #feature-callout .screen[pos=callout] .section-main .dismiss-button { 545 font-size: 1em; 546 inset-block: 0 auto; 547 inset-inline: auto 0; 548 margin-block: 16px 0; 549 margin-inline: 0 16px; 550 background-color: transparent; 551 } 552 #feature-callout .screen[pos=callout] .section-main .dismiss-button[button-size=small] { 553 height: 24px; 554 width: 24px; 555 min-height: 24px; 556 min-width: 24px; 557 } 558 #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background { 559 background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-background); 560 } 561 #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover { 562 background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-background-hover); 563 color: var(--fc-button-color-hover); 564 } 565 #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover:active { 566 background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-background-active); 567 } 568 @media (prefers-contrast) { 569 #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background { 570 background-color: var(--fc-button-background); 571 border: 1px solid var(--fc-button-border); 572 color: var(--fc-button-color); 573 } 574 #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover:not(:disabled), #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background[open] { 575 background-color: var(--fc-button-background-hover); 576 color: var(--fc-button-color-hover); 577 border: 1px solid var(--fc-button-border-hover); 578 } 579 #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background[open]:active { 580 background-color: var(--fc-button-background-active); 581 color: var(--fc-button-color-active); 582 border: 1px solid var(--fc-button-border-active); 583 } 584 } 585 #feature-callout .screen[pos=callout] .action-buttons { 586 display: flex; 587 flex-flow: row nowrap; 588 align-items: stretch; 589 justify-content: end; 590 gap: 10px; 591 margin-top: 4px; 592 } 593 #feature-callout .screen[pos=callout] .action-buttons[alignment=start] { 594 justify-content: start; 595 } 596 #feature-callout .screen[pos=callout] .action-buttons[alignment=space-between] { 597 justify-content: space-between; 598 } 599 #feature-callout .screen[pos=callout] .action-buttons .secondary-cta { 600 font-size: inherit; 601 } 602 #feature-callout .screen[pos=callout] .action-buttons .primary, 603 #feature-callout .screen[pos=callout] .action-buttons .secondary { 604 padding: 4px 16px; 605 margin: 0; 606 font-size: 0.813em; 607 font-weight: var(--font-weight-semibold); 608 line-height: 16px; 609 min-height: var(--button-min-height); 610 text-decoration: none; 611 cursor: default; 612 } 613 #feature-callout .screen[pos=callout] .action-buttons .secondary { 614 background-color: var(--fc-button-background); 615 } 616 #feature-callout .screen[pos=callout] .action-buttons .primary { 617 background-color: var(--fc-primary-button-background); 618 } 619 #feature-callout .screen[pos=callout] .action-buttons .split-button-container { 620 align-items: stretch; 621 } 622 #feature-callout .screen[pos=callout] .action-buttons .split-button-container:not([hidden]) { 623 display: flex; 624 } 625 #feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:not(.submenu-button), 626 #feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:not(.submenu-button), 627 #feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:not(.submenu-button) { 628 border-start-end-radius: 0; 629 border-end-end-radius: 0; 630 margin-inline-end: 0; 631 } 632 #feature-callout .screen[pos=callout] .action-buttons .split-button-container .primary:focus-visible, 633 #feature-callout .screen[pos=callout] .action-buttons .split-button-container .secondary:focus-visible, 634 #feature-callout .screen[pos=callout] .action-buttons .split-button-container .additional-cta:focus-visible { 635 z-index: 2; 636 } 637 #feature-callout .screen[pos=callout] .action-buttons .split-button-container .submenu-button { 638 border-start-start-radius: 0; 639 border-end-start-radius: 0; 640 margin-inline-start: 1px; 641 padding: 8px; 642 min-height: var(--button-min-height); 643 min-width: var(--button-min-height); 644 box-sizing: border-box; 645 background-image: url("chrome://global/skin/icons/arrow-down.svg"); 646 background-repeat: no-repeat; 647 background-size: 16px; 648 background-position: center; 649 -moz-context-properties: fill; 650 fill: currentColor; 651 } 652 #feature-callout .screen[pos=callout] .action-buttons .primary, 653 #feature-callout .screen[pos=callout] .action-buttons .secondary, 654 #feature-callout .screen[pos=callout] .dismiss-button { 655 border-radius: 4px; 656 } 657 #feature-callout .screen[pos=callout] .action-buttons .primary:focus-visible, 658 #feature-callout .screen[pos=callout] .action-buttons .secondary:focus-visible, 659 #feature-callout .screen[pos=callout] .dismiss-button:focus-visible { 660 box-shadow: none; 661 outline: 2px solid var(--fc-accent-color); 662 outline-offset: 2px; 663 } 664 #feature-callout .screen[pos=callout] .action-buttons .primary:disabled, 665 #feature-callout .screen[pos=callout] .action-buttons .secondary:disabled, 666 #feature-callout .screen[pos=callout] .dismiss-button:disabled { 667 opacity: 0.4; 668 cursor: auto; 669 } 670 #feature-callout .screen[pos=callout] .action-buttons .secondary, 671 #feature-callout .screen[pos=callout] .dismiss-button { 672 border: 1px solid var(--fc-button-border); 673 color: var(--fc-button-color); 674 } 675 #feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .secondary[open], 676 #feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled), 677 #feature-callout .screen[pos=callout] .dismiss-button[open] { 678 background-color: var(--fc-button-background-hover); 679 color: var(--fc-button-color-hover); 680 border: 1px solid var(--fc-button-border-hover); 681 } 682 #feature-callout .screen[pos=callout] .action-buttons .secondary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .secondary[open]:active, 683 #feature-callout .screen[pos=callout] .dismiss-button:hover:not(:disabled):active, 684 #feature-callout .screen[pos=callout] .dismiss-button[open]:active { 685 background-color: var(--fc-button-background-active); 686 color: var(--fc-button-color-active); 687 border: 1px solid var(--fc-button-border-active); 688 } 689 #feature-callout .screen[pos=callout] .action-buttons .primary { 690 border: 1px solid var(--fc-primary-button-border); 691 color: var(--fc-primary-button-color); 692 } 693 #feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled), #feature-callout .screen[pos=callout] .action-buttons .primary[open] { 694 background-color: var(--fc-primary-button-background-hover); 695 color: var(--fc-primary-button-color-hover); 696 border: 1px solid var(--fc-primary-button-border-hover); 697 } 698 #feature-callout .screen[pos=callout] .action-buttons .primary:hover:not(:disabled):active, #feature-callout .screen[pos=callout] .action-buttons .primary[open]:active { 699 background-color: var(--fc-primary-button-background-active); 700 color: var(--fc-primary-button-color-active); 701 border: 1px solid var(--fc-primary-button-border-active); 702 } 703 #feature-callout .screen[pos=callout] .action-checklist { 704 display: flex; 705 flex-direction: column; 706 } 707 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-subtitle { 708 text-align: start; 709 margin-block-end: 8px; 710 } 711 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-divider { 712 margin-block: 0; 713 width: 100%; 714 color: var(--fc-button-background); 715 } 716 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar { 717 width: 100%; 718 height: 6px; 719 padding-block: 0; 720 background-color: color-mix(in srgb, var(--fc-color) 25%, transparent); 721 opacity: 1; 722 transition: none; 723 border-radius: 8px; 724 display: flex; 725 justify-content: flex-start; 726 margin-block-end: 16px; 727 } 728 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar:dir(rtl) { 729 justify-content: flex-end; 730 } 731 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-progress-bar .indicator { 732 width: var(--action-checklist-progress-bar-progress); 733 height: 100%; 734 background-color: var(--fc-accent-color); 735 border: 0; 736 border-radius: 8px; 737 opacity: 1; 738 transition: var(--progress-bar-transition); 739 } 740 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items { 741 display: flex; 742 flex-direction: column; 743 } 744 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button { 745 background: none; 746 display: flex; 747 justify-content: space-between; 748 align-items: center; 749 margin-inline: 0; 750 margin-block: 4px; 751 border: none; 752 border-radius: 4px; 753 padding-block: 8px; 754 } 755 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:first-child { 756 margin-block-start: 0; 757 } 758 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:last-child { 759 margin-block-end: 0; 760 } 761 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:not(:disabled):hover { 762 background-color: var(--fc-button-background-hover); 763 } 764 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button:disabled { 765 color: var(--fc-color); 766 } 767 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container { 768 display: flex; 769 align-items: center; 770 } 771 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container span { 772 text-align: start; 773 } 774 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-icon-container { 775 margin-block-start: 2px; 776 } 777 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled { 778 margin-inline-end: 8px; 779 flex-shrink: 0; 780 } 781 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-empty { 782 border-radius: 50%; 783 width: 0.75em; 784 height: 0.75em; 785 border: 2px solid color-mix(in srgb, var(--fc-color) 25%, transparent); 786 } 787 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .action-checklist-label-container .check-filled { 788 background-image: url("chrome://global/skin/icons/check-filled.svg"); 789 fill: var(--fc-icon-success-color); 790 } 791 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon, #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .check-filled { 792 border: none; 793 width: 1em; 794 height: 1em; 795 background-repeat: no-repeat; 796 background-position: center; 797 background-size: contain; 798 -moz-context-properties: fill; 799 } 800 #feature-callout .screen[pos=callout] .action-checklist .action-checklist-items button .external-link-icon-container .external-link-icon { 801 background-image: url("chrome://global/skin/icons/open-in-new.svg"); 802 fill: var(--fc-color); 803 } 804 panel#feature-callout:is([side=top], [side=bottom]):not([hide-arrow=permanent]) { 805 margin-inline: var(--panel-margin-offset); 806 } 807 808 panel#feature-callout:is([side=left], [side=right]):not([hide-arrow=permanent]) { 809 margin-block: var(--panel-margin-offset); 810 } 811 812 panel#feature-callout::part(content) { 813 position: relative; 814 } 815 816 #feature-callout .arrow-box { 817 position: absolute; 818 overflow: visible; 819 transform: rotate(45deg); 820 transform-style: preserve-3d; 821 } 822 #feature-callout:not([arrow-position]) .arrow-box, #feature-callout[hide-arrow] .arrow-box { 823 display: none; 824 } 825 #feature-callout .arrow { 826 width: var(--arrow-square-size); 827 height: var(--arrow-square-size); 828 } 829 #feature-callout .shadow-arrow-box { 830 z-index: -1; 831 } 832 #feature-callout .shadow-arrow { 833 background: transparent; 834 outline: 1px solid var(--fc-border); 835 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); 836 } 837 #feature-callout .background-arrow-box { 838 z-index: 1; 839 pointer-events: none; 840 } 841 #feature-callout .background-arrow { 842 background: var(--fc-background); 843 clip-path: var(--fc-arrow-clip-path); 844 } 845 #feature-callout[arrow-position=top] .arrow-box { 846 top: var(--arrow-offset); 847 inset-inline-start: var(--arrow-center-inset); 848 --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); 849 } 850 panel#feature-callout[arrow-position=top]::part(content) { 851 margin-top: var(--panel-arrow-space); 852 } 853 854 panel#feature-callout[arrow-position=top] { 855 margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 856 } 857 858 #feature-callout[arrow-position=bottom] .arrow-box { 859 bottom: var(--arrow-offset); 860 inset-inline-start: var(--arrow-center-inset); 861 --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); 862 } 863 panel#feature-callout[arrow-position=bottom]::part(content) { 864 margin-bottom: var(--panel-arrow-space); 865 } 866 867 panel#feature-callout[arrow-position=bottom] { 868 margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 869 } 870 871 #feature-callout[arrow-position=inline-end] .arrow-box { 872 top: var(--arrow-center-inset); 873 inset-inline-end: var(--arrow-offset); 874 --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); 875 } 876 panel#feature-callout[arrow-position=inline-end]::part(content) { 877 margin-inline-end: var(--panel-arrow-space); 878 } 879 880 panel#feature-callout[arrow-position=inline-end] { 881 margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 882 } 883 884 #feature-callout[arrow-position=inline-start] .arrow-box { 885 top: var(--arrow-center-inset); 886 inset-inline-start: var(--arrow-offset); 887 --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); 888 } 889 panel#feature-callout[arrow-position=inline-start]::part(content) { 890 margin-inline-start: var(--panel-arrow-space); 891 } 892 893 panel#feature-callout[arrow-position=inline-start] { 894 margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 895 } 896 897 #feature-callout[arrow-position=top-end] .arrow-box { 898 top: var(--arrow-offset); 899 inset-inline-end: var(--arrow-corner-inset); 900 --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); 901 } 902 panel#feature-callout[arrow-position=top-end]::part(content) { 903 margin-top: var(--panel-arrow-space); 904 } 905 906 panel#feature-callout[arrow-position=top-end] { 907 margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 908 } 909 910 #feature-callout[arrow-position=top-start] .arrow-box { 911 top: var(--arrow-offset); 912 inset-inline-start: var(--arrow-corner-inset); 913 --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); 914 } 915 panel#feature-callout[arrow-position=top-start]::part(content) { 916 margin-top: var(--panel-arrow-space); 917 } 918 919 panel#feature-callout[arrow-position=top-start] { 920 margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 921 } 922 923 #feature-callout[arrow-position=bottom-end] .arrow-box { 924 bottom: var(--arrow-offset); 925 inset-inline-end: var(--arrow-corner-inset); 926 --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); 927 } 928 panel#feature-callout[arrow-position=bottom-end]::part(content) { 929 margin-bottom: var(--panel-arrow-space); 930 } 931 932 panel#feature-callout[arrow-position=bottom-end] { 933 margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 934 } 935 936 #feature-callout[arrow-position=bottom-start] .arrow-box { 937 bottom: var(--arrow-offset); 938 inset-inline-start: var(--arrow-corner-inset); 939 --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); 940 } 941 panel#feature-callout[arrow-position=bottom-start]::part(content) { 942 margin-bottom: var(--panel-arrow-space); 943 } 944 945 panel#feature-callout[arrow-position=bottom-start] { 946 margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 947 } 948 949 #feature-callout[arrow-position=inline-end-top] .arrow-box { 950 top: var(--arrow-corner-inset); 951 inset-inline-end: var(--arrow-offset); 952 --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); 953 } 954 panel#feature-callout[arrow-position=inline-end-top]::part(content) { 955 margin-inline-end: var(--panel-arrow-space); 956 } 957 958 panel#feature-callout[arrow-position=inline-end-top] { 959 margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 960 } 961 962 #feature-callout[arrow-position=inline-end-bottom] .arrow-box { 963 bottom: var(--arrow-corner-inset); 964 inset-inline-end: var(--arrow-offset); 965 --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); 966 } 967 panel#feature-callout[arrow-position=inline-end-bottom]::part(content) { 968 margin-inline-end: var(--panel-arrow-space); 969 } 970 971 panel#feature-callout[arrow-position=inline-end-bottom] { 972 margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 973 } 974 975 #feature-callout[arrow-position=inline-start-top] .arrow-box { 976 top: var(--arrow-corner-inset); 977 inset-inline-start: var(--arrow-offset); 978 --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); 979 } 980 panel#feature-callout[arrow-position=inline-start-top]::part(content) { 981 margin-inline-start: var(--panel-arrow-space); 982 } 983 984 panel#feature-callout[arrow-position=inline-start-top] { 985 margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 986 } 987 988 #feature-callout[arrow-position=inline-start-bottom] .arrow-box { 989 bottom: var(--arrow-corner-inset); 990 inset-inline-start: var(--arrow-offset); 991 --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); 992 } 993 panel#feature-callout[arrow-position=inline-start-bottom]::part(content) { 994 margin-inline-start: var(--panel-arrow-space); 995 } 996 997 panel#feature-callout[arrow-position=inline-start-bottom] { 998 margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); 999 } 1000 1001 /* stylelint-disable max-nesting-depth */ 1002 html { 1003 height: 100%; 1004 } 1005 1006 .dummy { 1007 background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color); 1008 } 1009 1010 :root[dialogroot] { 1011 background-color: transparent; 1012 } 1013 :root[dialogroot] body { 1014 padding: 0; 1015 } 1016 :root[dialogroot] .onboardingContainer { 1017 height: 100%; 1018 background-color: transparent; 1019 } 1020 :root[dialogroot] .onboardingContainer:dir(rtl) { 1021 transform: unset; 1022 } 1023 :root[dialogroot] .onboardingContainer .logo-container { 1024 pointer-events: none; 1025 } 1026 :root[dialogroot] .onboardingContainer .screen:dir(rtl) { 1027 transform: unset; 1028 } 1029 1030 .welcome-container .onboardingContainer { 1031 min-height: 610px; 1032 min-width: fit-content; 1033 } 1034 1035 .onboardingContainer:has(.addons-picker-container) .screen[pos=split][fullscreen] { 1036 height: auto; 1037 } 1038 .onboardingContainer:has(.addons-picker-container) .screen[pos=split][fullscreen] .section-secondary { 1039 height: auto; 1040 } 1041 .onboardingContainer:has(.addons-picker-container) .screen[pos=split][fullscreen] .main-content { 1042 min-height: 100vh; 1043 } 1044 1045 .onboardingContainer:has(.embedded-backup-restore-container) .screen[pos=split][fullscreen] .section-main .main-content .welcome-text { 1046 margin-block: 15px 22px; 1047 } 1048 .onboardingContainer:has(.embedded-backup-restore-container) .screen[pos=split][fullscreen] .section-main .main-content .welcome-text h1, .onboardingContainer:has(.embedded-backup-restore-container) .screen[pos=split][fullscreen] .section-main .main-content .welcome-text h2 { 1049 max-width: 300px; 1050 } 1051 1052 .onboardingContainer { 1053 --grey-subtitle-1: light-dark(#696977, #FFF); 1054 --mr-welcome-background-color: light-dark(#F8F6F4, #333336); 1055 --mr-screen-heading-color: var(--text-color); 1056 --mr-welcome-background-gradient: linear-gradient( 1057 0deg, 1058 light-dark(rgba(144, 89, 255, 20%), rgba(144, 89, 255, 30%)) 0%, 1059 light-dark(rgba(2, 144, 238, 20%), rgba(2, 144, 238, 30%)) 100% 1060 ); 1061 --mr-screen-background-color: light-dark(#F8F6F4, #62697A); 1062 --single-select-border-color: #8F8F9D; 1063 --single-select-hover-color: light-dark(#DEDEDF, #52525E); 1064 --picker-background-color: color-mix(in srgb, transparent 98%, light-dark(black, white) 2%); 1065 --picker-hover-background-color: color-mix(in srgb, transparent 95%, light-dark(black, white) 5%); 1066 --picker-border-color: var(--border-color); 1067 --picker-checked-border-color: var(--border-color-selected); 1068 --picker-hover-border-color: var(--picker-border-color); 1069 --picker-focus-ring-color: var(--color-accent-primary-selected); 1070 --picker-checkbox-color: var(--color-accent-primary-selected); 1071 --picker-checkbox-hover-color: var(--picker-checkbox-color); 1072 --picker-backup-flair-background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent); 1073 --picker-backup-flair-color: var(--color-accent-primary); 1074 font-family: system-ui; 1075 font-size: 16px; 1076 position: relative; 1077 text-align: center; 1078 height: 100vh; 1079 --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate; 1080 } 1081 @media (forced-colors: active) { 1082 .onboardingContainer { 1083 --picker-background-color: ButtonFace; 1084 --picker-hover-background-color: SelectedItemText; 1085 --picker-border-color: ButtonText; 1086 --picker-checked-border-color: var(--picker-border-color); 1087 --picker-hover-border-color: SelectedItem; 1088 --picker-focus-ring-color: CanvasText; 1089 --picker-checkbox-color: ButtonText; 1090 --picker-checkbox-hover-color: SelectedItem; 1091 } 1092 } 1093 @media (prefers-contrast) { 1094 .onboardingContainer { 1095 --mr-screen-background-color: buttontext; 1096 --mr-screen-heading-color: buttonface; 1097 background-color: var(--background-color-canvas); 1098 } 1099 } 1100 @media (prefers-reduced-motion: no-preference) { 1101 .onboardingContainer { 1102 --translate: 30px; 1103 --rotate: 20deg; 1104 --scale: 0.4; 1105 --progress-bar-transition: 0.6s translate; 1106 } 1107 .onboardingContainer:dir(rtl) { 1108 --scale: -0.4 0.4; 1109 } 1110 } 1111 @media (prefers-reduced-motion: reduce) { 1112 .onboardingContainer { 1113 --translate: 0; 1114 --rotate: 0deg; 1115 --scale: 1; 1116 --progress-bar-transition: none; 1117 } 1118 .onboardingContainer:dir(rtl) { 1119 --scale: -1 1; 1120 } 1121 } 1122 .onboardingContainer:dir(rtl) { 1123 transform: rotateY(180deg); 1124 } 1125 .onboardingContainer:has([pos=split][fullscreen]) { 1126 min-height: 100vh; 1127 height: auto; 1128 display: flex; 1129 flex-direction: column; 1130 } 1131 .onboardingContainer .section-main { 1132 display: flex; 1133 flex-direction: column; 1134 justify-content: center; 1135 width: 504px; 1136 flex-shrink: 0; 1137 } 1138 .onboardingContainer .section-main:not(.embedded-migration) { 1139 position: relative; 1140 } 1141 .onboardingContainer .main-content { 1142 background-color: var(--background-color-canvas); 1143 border-radius: var(--border-radius-large); 1144 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 1145 display: flex; 1146 flex-direction: column; 1147 height: 100%; 1148 padding: 0; 1149 transition: var(--transition); 1150 z-index: 1; 1151 box-sizing: border-box; 1152 } 1153 @media (prefers-contrast) { 1154 .onboardingContainer .main-content { 1155 border: 1px solid var(--text-color); 1156 } 1157 } 1158 .onboardingContainer .main-content.no-steps { 1159 padding-bottom: 48px; 1160 } 1161 .onboardingContainer .main-content .main-content-inner { 1162 display: flex; 1163 flex-direction: column; 1164 flex-grow: 1; 1165 justify-content: space-around; 1166 } 1167 .onboardingContainer .main-content .no-steps .main-content { 1168 padding-bottom: 48px; 1169 } 1170 .onboardingContainer .main-content .no-steps .steps { 1171 display: none; 1172 } 1173 .onboardingContainer .screen { 1174 display: flex; 1175 position: relative; 1176 flex-flow: row nowrap; 1177 height: 100%; 1178 min-height: 500px; 1179 overflow: hidden; 1180 } 1181 .onboardingContainer .screen.light-text { 1182 --text-color: rgb(251, 251, 254); 1183 --button-text-color-primary: rgb(43, 42, 51); 1184 --button-text-color-primary-hover: rgb(43, 42, 51); 1185 --button-background-color-primary: rgb(0, 221, 255); 1186 --button-background-color-primary-hover: rgb(128, 235, 255); 1187 --button-background-color-primary-active: rgb(170, 242, 255); 1188 --button-text-color: var(--text-color); 1189 } 1190 .onboardingContainer .screen.dark-text { 1191 --text-color: rgb(21, 20, 26); 1192 --button-text-color-primary: rgb(251, 251, 254); 1193 --button-text-color-primary-hover: rgb(251, 251, 254); 1194 --button-background-color-primary: #0061E0; 1195 --button-background-color-primary-hover: #0250BB; 1196 --button-background-color-primary-active: #053E94; 1197 --button-border-color-primary: transparent; 1198 --button-border-color-primary-hover: transparent; 1199 --button-text-color: var(--text-color); 1200 } 1201 .onboardingContainer .screen:dir(rtl) { 1202 transform: rotateY(180deg); 1203 } 1204 .onboardingContainer .screen[pos=center] { 1205 background-color: rgba(21, 20, 26, 0.5); 1206 min-width: 504px; 1207 } 1208 .onboardingContainer .screen[pos=center].with-noodles { 1209 min-width: 610px; 1210 min-height: 610px; 1211 } 1212 .onboardingContainer .screen[pos=center].with-noodles .section-main { 1213 height: 504px; 1214 } 1215 .onboardingContainer .screen[pos=center].with-video { 1216 justify-content: center; 1217 background: none; 1218 align-items: center; 1219 } 1220 .onboardingContainer .screen[pos=center].with-video .section-main { 1221 width: 800px; 1222 height: 550px; 1223 } 1224 .onboardingContainer .screen[pos=center].with-video .main-content { 1225 background-color: var(--mr-welcome-background-color); 1226 border-radius: var(--border-radius-medium); 1227 box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2); 1228 padding: 44px 85px 20px; 1229 } 1230 .onboardingContainer .screen[pos=center].with-video .main-content .welcome-text { 1231 margin: 0; 1232 } 1233 .onboardingContainer .screen[pos=center].with-video .main-content .main-content-inner { 1234 justify-content: space-between; 1235 } 1236 .onboardingContainer .screen[pos=center].with-video .main-content h1, 1237 .onboardingContainer .screen[pos=center].with-video .main-content h2 { 1238 align-self: start; 1239 } 1240 .onboardingContainer .screen[pos=center].with-video .main-content h1 { 1241 font-size: 24px; 1242 line-height: 28.8px; 1243 } 1244 .onboardingContainer .screen[pos=center].with-video .main-content h2 { 1245 font-size: 15px; 1246 line-height: 22px; 1247 } 1248 .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta { 1249 justify-content: end; 1250 } 1251 .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon { 1252 -moz-context-properties: fill; 1253 fill: currentColor; 1254 text-decoration: none; 1255 } 1256 .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon::after { 1257 content: ""; 1258 padding-inline-end: 12px; 1259 margin-inline-start: 4px; 1260 background: url("chrome://browser/skin/forward.svg") no-repeat center/12px; 1261 } 1262 .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .arrow-icon:dir(rtl)::after { 1263 background-image: url("chrome://browser/skin/back.svg"); 1264 } 1265 .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary { 1266 background-color: var(--button-background-color); 1267 border: var(--button-border); 1268 line-height: 12px; 1269 font-size: 0.72em; 1270 font-weight: var(--font-weight-semibold); 1271 padding: 8px 16px; 1272 text-decoration: none; 1273 cursor: default; 1274 color: var(--button-text-color); 1275 } 1276 .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open] { 1277 background-color: var(--button-background-color-hover); 1278 color: var(--button-text-color-hover); 1279 } 1280 .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].with-video .main-content .secondary-cta .secondary[open]:active { 1281 background-color: var(--button-background-color-active); 1282 color: var(--button-text-color-active); 1283 } 1284 .onboardingContainer .screen[pos=center].addons-picker { 1285 justify-content: center; 1286 align-items: center; 1287 background: none; 1288 } 1289 .onboardingContainer .screen[pos=center].addons-picker .section-main { 1290 width: 800px; 1291 height: 550px; 1292 } 1293 .onboardingContainer .screen[pos=center].addons-picker .main-content { 1294 background-color: var(--background-color-canvas); 1295 border-radius: var(--border-radius-medium); 1296 box-shadow: 0 2px 14px rgba(58, 57, 68, 0.2); 1297 overflow: hidden; 1298 } 1299 .onboardingContainer .screen[pos=center].addons-picker .main-content .welcome-text { 1300 display: flex; 1301 margin: 0; 1302 } 1303 .onboardingContainer .screen[pos=center].addons-picker .main-content .main-content-inner { 1304 padding: 25px 56px 0; 1305 justify-content: space-between; 1306 } 1307 .onboardingContainer .screen[pos=center].addons-picker .main-content h1, 1308 .onboardingContainer .screen[pos=center].addons-picker .main-content h2 { 1309 align-self: start; 1310 } 1311 .onboardingContainer .screen[pos=center].addons-picker .main-content h2 { 1312 font-size: 15px; 1313 text-align: start; 1314 } 1315 .onboardingContainer .screen[pos=center].addons-picker .main-content .brand-logo { 1316 display: block; 1317 margin: 40px 56px 0; 1318 transition: var(--transition); 1319 height: 30px; 1320 } 1321 .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta { 1322 display: block; 1323 margin: 8px 0; 1324 } 1325 .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link { 1326 background: none; 1327 padding: 0; 1328 font-weight: normal; 1329 background: none; 1330 text-decoration: underline; 1331 cursor: pointer; 1332 color: var(--link-color); 1333 } 1334 .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:hover { 1335 color: var(--link-color-hover); 1336 } 1337 .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active { 1338 color: var(--link-color-active); 1339 } 1340 @media (prefers-contrast) { 1341 .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.cta-link:active { 1342 text-decoration: none; 1343 } 1344 } 1345 .onboardingContainer .screen[pos=center].addons-picker .main-content .additional-cta.secondary:hover { 1346 background-color: var(--button-background-color-hover); 1347 } 1348 .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta { 1349 justify-content: end; 1350 } 1351 .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon { 1352 -moz-context-properties: fill; 1353 fill: currentColor; 1354 text-decoration: none; 1355 } 1356 .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon::after { 1357 content: ""; 1358 padding-inline-end: 12px; 1359 margin-inline-start: 4px; 1360 background: url("chrome://browser/skin/forward.svg") no-repeat center/12px; 1361 } 1362 .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .arrow-icon:dir(rtl)::after { 1363 background-image: url("chrome://browser/skin/back.svg"); 1364 } 1365 .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary { 1366 background-color: var(--button-background-color); 1367 border: var(--button-border); 1368 line-height: 12px; 1369 font-size: 0.72em; 1370 font-weight: var(--font-weight-semibold); 1371 padding: 8px 16px; 1372 text-decoration: none; 1373 cursor: default; 1374 color: var(--button-text-color); 1375 } 1376 .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open] { 1377 background-color: var(--button-background-color-hover); 1378 color: var(--button-text-color-hover); 1379 } 1380 .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=center].addons-picker .main-content .secondary-cta .secondary[open]:active { 1381 background-color: var(--button-background-color-active); 1382 color: var(--button-text-color-active); 1383 } 1384 .onboardingContainer .screen[pos=center].addons-picker .addon-container { 1385 display: flex; 1386 border: 1px solid var(--border-color); 1387 box-shadow: 0 1px 2px 0 var(--border-color); 1388 border-radius: var(--border-radius-small); 1389 margin: 5px auto; 1390 text-align: start; 1391 } 1392 .onboardingContainer .screen[pos=center].addons-picker .addon-container .rtamo-icon img { 1393 margin: 10px; 1394 } 1395 .onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-details { 1396 display: grid; 1397 width: 70%; 1398 } 1399 .onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-title { 1400 margin: 10px 0 3px; 1401 font-size: 16px; 1402 font-weight: var(--heading-font-weight); 1403 } 1404 .onboardingContainer .screen[pos=center].addons-picker .addon-container .addon-description { 1405 margin: 2px 0 10px; 1406 font-size: 13px; 1407 font-weight: normal; 1408 } 1409 .onboardingContainer .screen[pos=center].addons-picker .addon-container .install-button-wrapper { 1410 display: flex; 1411 } 1412 .onboardingContainer .screen[pos=center].addons-picker .addon-container button { 1413 align-self: center; 1414 width: 124px; 1415 } 1416 .onboardingContainer .screen[pos=center].addons-picker .loader { 1417 width: 1em; 1418 height: 1em; 1419 border: 3px solid var(--button-text-color-primary); 1420 border-bottom-color: transparent; 1421 border-radius: var(--border-radius-circle); 1422 box-sizing: border-box; 1423 animation: rotation 1s linear infinite; 1424 justify-self: center; 1425 } 1426 @keyframes rotation { 1427 0% { 1428 transform: rotate(0deg); 1429 } 1430 100% { 1431 transform: rotate(360deg); 1432 } 1433 } 1434 .onboardingContainer .screen[pos=center].addons-picker .loaderContainer { 1435 display: flex; 1436 padding: 1.5px 37.5px; 1437 margin: auto; 1438 } 1439 .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary { 1440 background: none; 1441 text-decoration: underline; 1442 cursor: pointer; 1443 color: var(--link-color); 1444 font-size: 14px; 1445 font-weight: normal; 1446 line-height: 20px; 1447 } 1448 .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:hover { 1449 color: var(--link-color-hover); 1450 } 1451 .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active { 1452 color: var(--link-color-active); 1453 } 1454 @media (prefers-contrast) { 1455 .onboardingContainer .screen:not([pos=split]) .secondary-cta .secondary:active { 1456 text-decoration: none; 1457 } 1458 } 1459 .onboardingContainer .screen:not([pos=split]) .secondary-cta.top button { 1460 color: #FFF; 1461 } 1462 .onboardingContainer .screen:not([pos=split]) .secondary-cta.top button:hover { 1463 color: #E0E0E6; 1464 } 1465 .onboardingContainer .screen:not([pos=split]) migration-wizard { 1466 padding: 5px 60px; 1467 } 1468 .onboardingContainer .screen:not([pos=split]) migration-wizard::part(header) { 1469 text-align: center; 1470 } 1471 .onboardingContainer .screen:not([pos=split]) migration-wizard::part(buttons) { 1472 margin: 32px auto 0; 1473 } 1474 .onboardingContainer .screen:not([pos=split]) .welcome-text:empty { 1475 margin: 0; 1476 } 1477 .onboardingContainer .screen[pos=split]:where(:not([fullscreen])) { 1478 margin: auto; 1479 min-height: 550px; 1480 } 1481 .onboardingContainer .screen[pos=split]:where(:not([fullscreen]))::before { 1482 content: ""; 1483 position: absolute; 1484 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 1485 width: 800px; 1486 height: 550px; 1487 border-radius: var(--border-radius-medium); 1488 inset: 0; 1489 margin: auto; 1490 pointer-events: none; 1491 } 1492 .onboardingContainer .screen[pos=split] #content-tiles-container { 1493 margin: 0; 1494 } 1495 .onboardingContainer .screen[pos=split] #content-tiles-container .content-tile:not(:only-child) { 1496 margin-block: 0 24px; 1497 } 1498 .onboardingContainer .screen[pos=split] #content-tiles-container .content-tile:last-child { 1499 margin-block: 0 40px; 1500 } 1501 .onboardingContainer .screen[pos=split] #content-tiles-container .multi-select-container { 1502 padding: 0; 1503 } 1504 .onboardingContainer .screen[pos=split] .section-secondary, 1505 .onboardingContainer .screen[pos=split] .section-main { 1506 width: 400px; 1507 height: 550px; 1508 } 1509 .onboardingContainer .screen[pos=split] .secondary-cta.top { 1510 position: fixed; 1511 padding-inline-end: 0; 1512 } 1513 .onboardingContainer .screen[pos=split] .secondary-cta.top button { 1514 padding: 7px 15px; 1515 } 1516 .onboardingContainer .screen[pos=split] .secondary-buttons-top-container .secondary-cta.top { 1517 position: relative; 1518 padding-top: 0; 1519 top: 0; 1520 inset-inline-end: 0; 1521 } 1522 .onboardingContainer .screen[pos=split] .section-main { 1523 flex-direction: row; 1524 display: block; 1525 margin: auto; 1526 margin-inline-start: 0; 1527 } 1528 .onboardingContainer .screen[pos=split] .section-main:dir(rtl) { 1529 margin: auto; 1530 margin-inline-start: 0; 1531 } 1532 .onboardingContainer .screen[pos=split] .section-main.embedded-migration .main-content { 1533 padding-block: 100px 0; 1534 } 1535 .onboardingContainer .screen[pos=split] .section-main .main-content { 1536 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 1537 overflow: hidden; 1538 padding-inline: 35px 20px; 1539 padding-block: 120px 0; 1540 box-shadow: none; 1541 } 1542 .onboardingContainer .screen[pos=split] .section-main .main-content.no-steps { 1543 padding-bottom: 48px; 1544 } 1545 .onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) { 1546 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 1547 } 1548 .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph { 1549 text-align: start; 1550 font-size: 11px; 1551 line-height: 16.5px; 1552 color: light-dark(#5B5B66, #CFCFD8); 1553 } 1554 @media only screen and (width <= 800px) { 1555 .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph { 1556 padding-inline: 30px; 1557 } 1558 } 1559 [narrow] .onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph { 1560 padding-inline: 30px; 1561 } 1562 .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner { 1563 min-height: 330px; 1564 } 1565 .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons { 1566 padding: 0; 1567 margin-inline-start: -5px; 1568 display: flex; 1569 } 1570 .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .mobile-download-buttons button { 1571 cursor: pointer; 1572 } 1573 .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .qr-code-image { 1574 margin: 5px 0 10px; 1575 display: flex; 1576 } 1577 .onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner .language-switcher-container .primary { 1578 margin-bottom: 5px; 1579 } 1580 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons { 1581 position: relative; 1582 text-align: initial; 1583 height: 100%; 1584 } 1585 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container { 1586 font-size: 13px; 1587 margin-block: 1em; 1588 } 1589 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container:not(.multi-select-item) { 1590 transition: var(--transition); 1591 } 1592 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container input, 1593 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .checkbox-container label { 1594 vertical-align: middle; 1595 } 1596 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box { 1597 margin: 8px 0; 1598 } 1599 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta { 1600 margin: 0; 1601 } 1602 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link { 1603 background: none; 1604 text-decoration: underline; 1605 cursor: pointer; 1606 color: var(--link-color); 1607 padding: 0; 1608 font-weight: normal; 1609 } 1610 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:hover { 1611 color: var(--link-color-hover); 1612 } 1613 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active { 1614 color: var(--link-color-active); 1615 } 1616 @media (prefers-contrast) { 1617 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.cta-link:active { 1618 text-decoration: none; 1619 } 1620 } 1621 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .additional-cta-box .additional-cta.secondary[open] { 1622 background-color: var(--button-background-color-hover); 1623 } 1624 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons.additional-cta-container { 1625 flex-wrap: nowrap; 1626 align-items: start; 1627 } 1628 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta { 1629 position: absolute; 1630 bottom: -30px; 1631 inset-inline-end: 0; 1632 } 1633 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary { 1634 background-color: var(--button-background-color); 1635 border: var(--button-border); 1636 line-height: 12px; 1637 font-size: 0.72em; 1638 font-weight: var(--font-weight-semibold); 1639 padding: 8px 16px; 1640 text-decoration: none; 1641 cursor: default; 1642 } 1643 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open] { 1644 background-color: var(--button-background-color-hover); 1645 color: var(--button-text-color-hover); 1646 } 1647 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary:hover:active, .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .secondary[open]:active { 1648 background-color: var(--button-background-color-active); 1649 color: var(--button-text-color-active); 1650 } 1651 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon { 1652 -moz-context-properties: fill; 1653 fill: currentColor; 1654 text-decoration: none; 1655 } 1656 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon::after { 1657 content: ""; 1658 padding-inline-end: 12px; 1659 margin-inline-start: 4px; 1660 background: url("chrome://browser/skin/forward.svg") no-repeat center/12px; 1661 } 1662 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .secondary-cta .arrow-icon:dir(rtl)::after { 1663 background-image: url("chrome://browser/skin/back.svg"); 1664 } 1665 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .loader { 1666 width: 1em; 1667 height: 1em; 1668 border: 3px solid var(--button-text-color-primary); 1669 border-bottom-color: transparent; 1670 border-radius: var(--border-radius-circle); 1671 box-sizing: border-box; 1672 animation: rotation 1s linear infinite; 1673 justify-self: center; 1674 } 1675 @keyframes rotation { 1676 0% { 1677 transform: rotate(0deg); 1678 } 1679 100% { 1680 transform: rotate(360deg); 1681 } 1682 } 1683 .onboardingContainer .screen[pos=split] .section-main .main-content .action-buttons .loaderContainer { 1684 display: flex; 1685 padding: 1.5px 37.5px; 1686 margin: auto; 1687 } 1688 .onboardingContainer .screen[pos=split] .section-main .main-content .logo-container { 1689 text-align: start; 1690 } 1691 .onboardingContainer .screen[pos=split] .section-main .main-content .brand-logo { 1692 height: 25px; 1693 margin-block: 0; 1694 } 1695 .onboardingContainer .screen[pos=split] .section-main .main-content .logo-alt { 1696 width: inherit; 1697 height: inherit; 1698 } 1699 .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text { 1700 margin-inline: 0 10px; 1701 margin-block: 10px 35px; 1702 text-align: initial; 1703 align-items: initial; 1704 max-width: 400px; 1705 } 1706 .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text:empty { 1707 margin: 0; 1708 } 1709 .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1 { 1710 font-size: 24px; 1711 line-height: 1.2; 1712 width: 300px; 1713 } 1714 .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h2 { 1715 margin: 10px 0 0; 1716 min-height: 1em; 1717 font-size: 15px; 1718 line-height: 1.5; 1719 color: light-dark(#5B5B66, #CFCFD8); 1720 } 1721 .onboardingContainer .screen[pos=split] .section-main .main-content .welcome-text h1, 1722 .onboardingContainer .screen[pos=split] .section-main .main-content .primary { 1723 margin: 0; 1724 } 1725 .onboardingContainer .screen[pos=split] .section-main .main-content .steps { 1726 z-index: 1; 1727 } 1728 .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar { 1729 margin-inline: -35px; 1730 } 1731 @media (prefers-contrast) { 1732 .onboardingContainer .screen[pos=split] .section-main .main-content { 1733 border: 1px solid var(--text-color); 1734 } 1735 .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar { 1736 border-top: 1px solid var(--text-color); 1737 background-color: var(--background-color-canvas); 1738 } 1739 .onboardingContainer .screen[pos=split] .section-main .main-content .steps.progress-bar .indicator { 1740 background-color: var(--color-accent-primary); 1741 } 1742 } 1743 .onboardingContainer .screen[pos=split] .section-secondary { 1744 --mr-secondary-position: center center / auto 350px; 1745 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 1746 margin: auto 0 auto auto; 1747 display: flex; 1748 align-items: center; 1749 -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity; 1750 stroke: currentColor; 1751 position: relative; 1752 } 1753 .onboardingContainer .screen[pos=split] .section-secondary:dir(rtl) { 1754 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 1755 margin: auto; 1756 margin-inline-end: 0; 1757 } 1758 .onboardingContainer .screen[pos=split] .section-secondary h1 { 1759 color: var(--mr-screen-heading-color); 1760 font-weight: var(--font-weight-bold); 1761 font-size: 47px; 1762 line-height: 110%; 1763 max-width: 340px; 1764 text-align: initial; 1765 white-space: pre-wrap; 1766 text-shadow: none; 1767 margin-inline: 40px 0; 1768 } 1769 .onboardingContainer .screen[pos=split] .section-secondary .image-alt { 1770 width: inherit; 1771 height: inherit; 1772 } 1773 .onboardingContainer .screen[pos=split] .section-secondary .hero-image { 1774 flex: 1; 1775 display: flex; 1776 justify-content: center; 1777 max-height: 100%; 1778 } 1779 .onboardingContainer .screen[pos=split] .section-secondary .hero-image img { 1780 width: 100%; 1781 max-width: 180px; 1782 margin: 25px 0; 1783 padding-bottom: 30px; 1784 } 1785 @media only screen and (width <= 800px) { 1786 .onboardingContainer .screen[pos=split] .section-secondary .hero-image img { 1787 padding-bottom: unset; 1788 } 1789 } 1790 [narrow] .onboardingContainer .screen[pos=split] .section-secondary .hero-image img { 1791 padding-bottom: unset; 1792 } 1793 .onboardingContainer .screen[pos=split] .multi-select-container { 1794 margin-inline: 0 10px; 1795 } 1796 .onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container { 1797 display: grid; 1798 } 1799 .onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container label, .onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container p { 1800 grid-column: 2; 1801 } 1802 .onboardingContainer .screen[pos=split] .multi-select-container .checkbox-container p { 1803 margin-block: 0.5em 0; 1804 } 1805 @media only screen and (width <= 800px) { 1806 .onboardingContainer .screen[pos=split] .multi-select-container { 1807 flex-direction: column; 1808 align-self: center; 1809 align-items: start; 1810 justify-content: center; 1811 width: 240px; 1812 padding: 0 30px; 1813 margin-inline: 0; 1814 box-sizing: content-box; 1815 } 1816 } 1817 [narrow] .onboardingContainer .screen[pos=split] .multi-select-container { 1818 flex-direction: column; 1819 align-self: center; 1820 align-items: start; 1821 justify-content: center; 1822 width: 240px; 1823 padding: 0 30px; 1824 margin-inline: 0; 1825 box-sizing: content-box; 1826 } 1827 .onboardingContainer .screen[pos=split] .tiles-single-select-container { 1828 margin-block: -20px auto; 1829 align-items: initial; 1830 } 1831 .onboardingContainer .screen[pos=split] .tiles-single-select-container .select-item { 1832 min-width: 38px; 1833 } 1834 @media only screen and (width >= 800px) { 1835 .onboardingContainer .screen[pos=split] .tiles-single-select-section { 1836 margin-inline-start: -10px; 1837 } 1838 .onboardingContainer .screen[pos=split][reverse-split] { 1839 flex-direction: row-reverse; 1840 } 1841 .onboardingContainer .screen[pos=split][reverse-split] .section-main { 1842 margin: auto; 1843 margin-inline-end: 0; 1844 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 1845 } 1846 .onboardingContainer .screen[pos=split][reverse-split] .section-main .main-content { 1847 border-radius: inherit; 1848 } 1849 .onboardingContainer .screen[pos=split][reverse-split] .section-main:dir(rtl) { 1850 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 1851 margin: auto; 1852 margin-inline-end: 0; 1853 } 1854 .onboardingContainer .screen[pos=split][reverse-split] .section-secondary { 1855 margin: auto; 1856 margin-inline-start: 0; 1857 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 1858 } 1859 .onboardingContainer .screen[pos=split][reverse-split] .section-secondary:dir(rtl) { 1860 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 1861 margin: auto; 1862 margin-inline-start: 0; 1863 } 1864 } 1865 .onboardingContainer .screen[pos=split]:where([no-rdm=true]) .tiles-single-select-section { 1866 margin-inline-start: -10px; 1867 } 1868 .onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] { 1869 flex-direction: row-reverse; 1870 } 1871 .onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main { 1872 margin: auto; 1873 margin-inline-end: 0; 1874 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 1875 } 1876 .onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main .main-content { 1877 border-radius: inherit; 1878 } 1879 .onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-main:dir(rtl) { 1880 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 1881 margin: auto; 1882 margin-inline-end: 0; 1883 } 1884 .onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary { 1885 margin: auto; 1886 margin-inline-start: 0; 1887 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 1888 } 1889 .onboardingContainer .screen[pos=split]:where([no-rdm=true])[reverse-split] .section-secondary:dir(rtl) { 1890 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 1891 margin: auto; 1892 margin-inline-start: 0; 1893 } 1894 .onboardingContainer .screen[pos=split][fullscreen] { 1895 min-height: 100vh; 1896 } 1897 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary, 1898 .onboardingContainer .screen[pos=split][fullscreen] .section-main { 1899 width: 50%; 1900 height: auto; 1901 } 1902 .onboardingContainer .screen[pos=split][fullscreen] .section-main { 1903 margin: 0; 1904 display: flex; 1905 } 1906 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content { 1907 border-radius: 0; 1908 padding: 0; 1909 flex: 1; 1910 height: auto; 1911 } 1912 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content h1 { 1913 width: auto; 1914 } 1915 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner { 1916 min-height: 0; 1917 flex-grow: 0; 1918 padding-inline: 110px; 1919 margin-block: auto; 1920 padding-block: 40px; 1921 } 1922 @media only screen and (width <= 800px) { 1923 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner { 1924 padding-block: 20px; 1925 } 1926 } 1927 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner .steps:not(.progress-bar) { 1928 justify-content: start; 1929 padding-top: 24px; 1930 } 1931 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons { 1932 position: static; 1933 height: auto; 1934 } 1935 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta { 1936 inset-block-end: 26px; 1937 inset-inline-end: 30px; 1938 } 1939 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary { 1940 --mr-secondary-position: center center / 50%; 1941 border-radius: 0; 1942 margin: 0; 1943 } 1944 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image { 1945 height: 100%; 1946 display: flex; 1947 justify-content: center; 1948 align-items: center; 1949 } 1950 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img { 1951 width: 30%; 1952 } 1953 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text { 1954 margin-block: auto; 1955 margin-inline: 17% auto; 1956 text-align: start; 1957 width: 100%; 1958 max-width: 450px; 1959 } 1960 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text h1 { 1961 font-weight: var(--heading-font-weight); 1962 font-size: 80px; 1963 margin: 0; 1964 width: 100%; 1965 max-width: 100%; 1966 } 1967 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .message-text.hero-text h2 { 1968 font-size: 20px; 1969 margin: 0; 1970 margin-block-start: 24px; 1971 font-weight: var(--heading-font-weight); 1972 width: 100%; 1973 } 1974 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container { 1975 background: none; 1976 } 1977 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container { 1978 display: flex; 1979 flex-direction: row; 1980 border: 1px solid var(--border-color); 1981 box-shadow: 0 1px 2px 0 var(--border-color); 1982 border-radius: var(--border-radius-small); 1983 margin-block: 0 16px; 1984 text-align: start; 1985 padding: 16px; 1986 max-width: 800px; 1987 } 1988 @media (800px <= width <= 990px) { 1989 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container { 1990 flex-flow: row wrap; 1991 } 1992 } 1993 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .rtamo-icon img { 1994 margin-inline: 0 16px; 1995 } 1996 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container { 1997 flex-grow: 1; 1998 display: flex; 1999 flex-direction: column; 2000 } 2001 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row { 2002 display: flex; 2003 flex-grow: 1; 2004 justify-content: space-between; 2005 } 2006 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper { 2007 display: block; 2008 } 2009 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button { 2010 padding-inline: 16px; 2011 font-size: 12px; 2012 padding-block: 0; 2013 background-color: var(--button-background-color); 2014 color: var(--button-text-color); 2015 min-width: 0; 2016 } 2017 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button:hover { 2018 background-color: var(--button-background-color-hover); 2019 } 2020 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .install-button-wrapper button:active { 2021 background-color: var(--button-background-color-active); 2022 } 2023 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row:not(:last-child) { 2024 margin-block: 0 12px; 2025 } 2026 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details { 2027 margin-block: 0 4px; 2028 } 2029 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-title { 2030 font-size: 16px; 2031 font-weight: var(--heading-font-weight); 2032 } 2033 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author { 2034 font-size: 12px; 2035 margin-block: 2px 0; 2036 } 2037 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link { 2038 background: none; 2039 padding: 0; 2040 font-weight: normal; 2041 min-width: auto; 2042 min-height: auto; 2043 margin: 0; 2044 text-align: start; 2045 background: none; 2046 text-decoration: underline; 2047 cursor: pointer; 2048 color: var(--link-color); 2049 } 2050 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:hover { 2051 color: var(--link-color-hover); 2052 } 2053 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:active { 2054 color: var(--link-color-active); 2055 } 2056 @media (prefers-contrast) { 2057 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .author-link:active { 2058 text-decoration: none; 2059 } 2060 } 2061 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-author-details .addon-author .addon-by-line { 2062 margin-inline: 0 4px; 2063 } 2064 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .addon-container .addon-rows-container .addon-row .addon-description { 2065 font-size: 14px; 2066 } 2067 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .loader { 2068 width: 1em; 2069 height: 1em; 2070 border: 3px solid var(--button-text-color-primary); 2071 border-bottom-color: transparent; 2072 border-radius: var(--border-radius-circle); 2073 box-sizing: border-box; 2074 animation: rotation 1s linear infinite; 2075 justify-self: center; 2076 } 2077 @keyframes rotation { 2078 0% { 2079 transform: rotate(0deg); 2080 } 2081 100% { 2082 transform: rotate(360deg); 2083 } 2084 } 2085 .onboardingContainer .screen[pos=split][fullscreen] .addons-picker-container .loaderContainer { 2086 display: flex; 2087 padding: 1.5px 37.5px; 2088 margin: auto; 2089 } 2090 @media only screen and (width <= 800px) { 2091 .onboardingContainer .screen[pos=split][fullscreen] { 2092 height: 100%; 2093 } 2094 .onboardingContainer .screen[pos=split][fullscreen] .section-main, 2095 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary { 2096 width: 100%; 2097 } 2098 .onboardingContainer .screen[pos=split][fullscreen] .section-main { 2099 height: 75%; 2100 flex-grow: 1; 2101 margin: 0; 2102 display: flex; 2103 } 2104 .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] { 2105 height: 100%; 2106 } 2107 .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content { 2108 border-radius: 0; 2109 padding: 0; 2110 height: auto; 2111 } 2112 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta { 2113 inset-block-end: 0; 2114 inset-inline-end: 0; 2115 } 2116 .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner { 2117 padding-inline: 55px; 2118 margin-inline: auto; 2119 } 2120 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary { 2121 --mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%; 2122 height: 250px; 2123 } 2124 .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img { 2125 width: 25%; 2126 max-height: 75%; 2127 } 2128 } 2129 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main, 2130 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary { 2131 width: 100%; 2132 } 2133 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main { 2134 height: 75%; 2135 flex-grow: 1; 2136 margin: 0; 2137 display: flex; 2138 } 2139 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] { 2140 height: 100%; 2141 } 2142 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main[hide-secondary-section=responsive] .main-content { 2143 border-radius: 0; 2144 padding: 0; 2145 height: auto; 2146 } 2147 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .action-buttons .secondary-cta { 2148 inset-block-end: 0; 2149 inset-inline-end: 0; 2150 } 2151 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-main .main-content .main-content-inner { 2152 padding-inline: 55px; 2153 margin-inline: auto; 2154 } 2155 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary { 2156 --mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%; 2157 height: 250px; 2158 } 2159 [narrow] .onboardingContainer .screen[pos=split][fullscreen] .section-secondary .hero-image img { 2160 width: 25%; 2161 max-height: 75%; 2162 } 2163 @media only screen and (width <= 800px) { 2164 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) { 2165 flex-direction: column; 2166 min-height: 550px; 2167 } 2168 .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before { 2169 width: 400px; 2170 } 2171 .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] { 2172 flex-direction: column; 2173 } 2174 .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary { 2175 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2176 margin: auto; 2177 margin-bottom: 0; 2178 } 2179 .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) { 2180 margin: auto; 2181 margin-bottom: 0; 2182 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2183 } 2184 .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main { 2185 height: auto; 2186 margin: auto; 2187 margin-top: 0; 2188 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2189 } 2190 .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) { 2191 margin: auto; 2192 margin-top: 0; 2193 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2194 } 2195 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary, 2196 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main { 2197 width: 400px; 2198 } 2199 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary { 2200 --mr-secondary-background-position-y: top; 2201 --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; 2202 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2203 margin: auto; 2204 margin-bottom: 0; 2205 height: 100px; 2206 } 2207 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img { 2208 margin: 6px 0; 2209 } 2210 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text { 2211 margin-inline: auto; 2212 } 2213 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 { 2214 font-size: 35px; 2215 text-align: center; 2216 white-space: normal; 2217 margin-inline: auto; 2218 margin-block: 14px 6px; 2219 } 2220 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) { 2221 margin: auto; 2222 margin-bottom: 0; 2223 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2224 } 2225 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden { 2226 display: none; 2227 } 2228 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) { 2229 min-width: 330px; 2230 margin-inline: 36px; 2231 } 2232 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main { 2233 margin: auto; 2234 margin-top: 0; 2235 height: 450px; 2236 } 2237 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) { 2238 flex-direction: column; 2239 margin-inline: 46px; 2240 } 2241 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] { 2242 height: 550px; 2243 margin: auto; 2244 } 2245 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) { 2246 margin: auto; 2247 } 2248 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content { 2249 padding: 50px 0 0; 2250 border-radius: var(--border-radius-medium); 2251 } 2252 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) { 2253 border-radius: var(--border-radius-medium); 2254 } 2255 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content { 2256 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2257 padding: 30px 0 0; 2258 } 2259 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner { 2260 align-items: center; 2261 } 2262 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container { 2263 text-align: center; 2264 } 2265 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo { 2266 min-height: 25px; 2267 } 2268 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) { 2269 background-position: center; 2270 } 2271 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt { 2272 width: inherit; 2273 height: inherit; 2274 } 2275 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text { 2276 align-items: center; 2277 text-align: center; 2278 margin-inline: 0; 2279 padding-inline: 30px; 2280 } 2281 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom, 2282 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top { 2283 display: none; 2284 } 2285 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons { 2286 text-align: center; 2287 } 2288 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container { 2289 display: none; 2290 } 2291 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta { 2292 position: relative; 2293 margin-block: 10px 0; 2294 bottom: 0; 2295 } 2296 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary, 2297 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary { 2298 min-width: 240px; 2299 margin-inline: 0; 2300 } 2301 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps { 2302 padding-block: 0; 2303 margin: 0; 2304 } 2305 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar { 2306 margin-inline: 0; 2307 } 2308 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link { 2309 align-self: center; 2310 } 2311 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button { 2312 top: -100px; 2313 } 2314 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) { 2315 margin: auto; 2316 margin-top: 0; 2317 } 2318 .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content { 2319 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2320 } 2321 .onboardingContainer .screen[pos=split][no-rdm] { 2322 width: 800px; 2323 } 2324 .onboardingContainer .screen[pos=split][no-rdm][reverse-split] { 2325 flex-direction: row-reverse; 2326 } 2327 .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main { 2328 margin: auto; 2329 margin-inline-end: 0; 2330 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 2331 } 2332 .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content { 2333 border-radius: inherit; 2334 } 2335 .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) { 2336 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 2337 margin: auto; 2338 margin-inline-end: 0; 2339 } 2340 .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary { 2341 margin: auto; 2342 margin-inline-start: 0; 2343 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 2344 } 2345 .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) { 2346 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 2347 margin: auto; 2348 margin-inline-start: 0; 2349 } 2350 } 2351 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) { 2352 flex-direction: column; 2353 min-height: 550px; 2354 } 2355 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))::before { 2356 width: 400px; 2357 } 2358 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] { 2359 flex-direction: column; 2360 } 2361 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary { 2362 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2363 margin: auto; 2364 margin-bottom: 0; 2365 } 2366 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-secondary:dir(rtl) { 2367 margin: auto; 2368 margin-bottom: 0; 2369 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2370 } 2371 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main { 2372 height: auto; 2373 margin: auto; 2374 margin-top: 0; 2375 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2376 } 2377 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm]))[reverse-split] .section-main:dir(rtl) { 2378 margin: auto; 2379 margin-top: 0; 2380 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2381 } 2382 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary, 2383 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main { 2384 width: 400px; 2385 } 2386 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary { 2387 --mr-secondary-background-position-y: top; 2388 --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%; 2389 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2390 margin: auto; 2391 margin-bottom: 0; 2392 height: 100px; 2393 } 2394 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .hero-image img { 2395 margin: 6px 0; 2396 } 2397 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary .message-text { 2398 margin-inline: auto; 2399 } 2400 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary h1 { 2401 font-size: 35px; 2402 text-align: center; 2403 white-space: normal; 2404 margin-inline: auto; 2405 margin-block: 14px 6px; 2406 } 2407 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary:dir(rtl) { 2408 margin: auto; 2409 margin-bottom: 0; 2410 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 2411 } 2412 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-secondary.with-secondary-section-hidden { 2413 display: none; 2414 } 2415 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) migration-wizard::part(deck) { 2416 min-width: 330px; 2417 margin-inline: 36px; 2418 } 2419 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main { 2420 margin: auto; 2421 margin-top: 0; 2422 height: 450px; 2423 } 2424 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main migration-wizard::part(buttons) { 2425 flex-direction: column; 2426 margin-inline: 46px; 2427 } 2428 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] { 2429 height: 550px; 2430 margin: auto; 2431 } 2432 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive]:dir(rtl) { 2433 margin: auto; 2434 } 2435 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content { 2436 padding: 50px 0 0; 2437 border-radius: var(--border-radius-medium); 2438 } 2439 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) { 2440 border-radius: var(--border-radius-medium); 2441 } 2442 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content { 2443 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2444 padding: 30px 0 0; 2445 } 2446 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .main-content-inner { 2447 align-items: center; 2448 } 2449 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container { 2450 text-align: center; 2451 } 2452 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo { 2453 min-height: 25px; 2454 } 2455 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo, [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .brand-logo:dir(rtl) { 2456 background-position: center; 2457 } 2458 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .logo-container .logo-alt { 2459 width: inherit; 2460 height: inherit; 2461 } 2462 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text { 2463 align-items: center; 2464 text-align: center; 2465 margin-inline: 0; 2466 padding-inline: 30px; 2467 } 2468 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-bottom, 2469 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .welcome-text .spacer-top { 2470 display: none; 2471 } 2472 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons { 2473 text-align: center; 2474 } 2475 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .checkbox-container { 2476 display: none; 2477 } 2478 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .action-buttons .secondary-cta { 2479 position: relative; 2480 margin-block: 10px 0; 2481 bottom: 0; 2482 } 2483 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .primary, 2484 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .secondary { 2485 min-width: 240px; 2486 margin-inline: 0; 2487 } 2488 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps { 2489 padding-block: 0; 2490 margin: 0; 2491 } 2492 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .main-content .steps.progress-bar { 2493 margin-inline: 0; 2494 } 2495 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .additional-cta.cta-link { 2496 align-self: center; 2497 } 2498 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main .dismiss-button { 2499 top: -100px; 2500 } 2501 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) { 2502 margin: auto; 2503 margin-top: 0; 2504 } 2505 [narrow] .onboardingContainer .screen[pos=split]:where(:not([no-rdm])) .section-main:dir(rtl) .main-content { 2506 border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); 2507 } 2508 [narrow] .onboardingContainer .screen[pos=split][no-rdm] { 2509 width: 800px; 2510 } 2511 [narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] { 2512 flex-direction: row-reverse; 2513 } 2514 [narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main { 2515 margin: auto; 2516 margin-inline-end: 0; 2517 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 2518 } 2519 [narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main .main-content { 2520 border-radius: inherit; 2521 } 2522 [narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-main:dir(rtl) { 2523 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 2524 margin: auto; 2525 margin-inline-end: 0; 2526 } 2527 [narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary { 2528 margin: auto; 2529 margin-inline-start: 0; 2530 border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0; 2531 } 2532 [narrow] .onboardingContainer .screen[pos=split][no-rdm][reverse-split] .section-secondary:dir(rtl) { 2533 border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium); 2534 margin: auto; 2535 margin-inline-start: 0; 2536 } 2537 @media only screen and (height <= 650px) and (800px <= width <= 990px) { 2538 .onboardingContainer .screen[pos=split]:where(:not([fullscreen])) .section-main .secondary-cta.top { 2539 display: none; 2540 } 2541 } 2542 @media only screen and (height <= 650px) and (width <= 620px) { 2543 .onboardingContainer .screen[pos=split]:where(:not([fullscreen])) .section-main .secondary-buttons-top-container { 2544 position: absolute; 2545 padding: 0; 2546 top: 0; 2547 inset-inline-end: 0; 2548 } 2549 } 2550 @media only screen and (height <= 650px) and (width <= 620px) { 2551 [narrow] .onboardingContainer .screen[pos=split]:where(:not([fullscreen])) .section-main .secondary-buttons-top-container { 2552 position: absolute; 2553 padding: 0; 2554 top: 0; 2555 inset-inline-end: 0; 2556 } 2557 } 2558 .onboardingContainer .brand-logo { 2559 margin-block: 60px 10px; 2560 transition: var(--transition); 2561 height: 80px; 2562 user-select: none; 2563 } 2564 .onboardingContainer .brand-logo.cta-top { 2565 margin-top: 25px; 2566 } 2567 .onboardingContainer .brand-logo.hide { 2568 visibility: hidden; 2569 padding: unset; 2570 margin-top: 50px; 2571 } 2572 .onboardingContainer .logo-alt { 2573 width: inherit; 2574 height: inherit; 2575 } 2576 .onboardingContainer .rtamo-theme-icon { 2577 max-height: 30px; 2578 border-radius: var(--border-radius-xsmall); 2579 margin-bottom: 10px; 2580 margin-top: 24px; 2581 } 2582 .onboardingContainer .rtamo-icon { 2583 text-align: start; 2584 } 2585 @media only screen and (width <= 800px) { 2586 .onboardingContainer .rtamo-icon { 2587 text-align: center; 2588 } 2589 } 2590 [narrow] .onboardingContainer .rtamo-icon { 2591 text-align: center; 2592 } 2593 .onboardingContainer .text-link { 2594 background: none; 2595 text-decoration: underline; 2596 cursor: pointer; 2597 color: var(--link-color); 2598 } 2599 .onboardingContainer .text-link:hover { 2600 color: var(--link-color-hover); 2601 } 2602 .onboardingContainer .text-link:active { 2603 color: var(--link-color-active); 2604 } 2605 @media (prefers-contrast) { 2606 .onboardingContainer .text-link:active { 2607 text-decoration: none; 2608 } 2609 } 2610 .onboardingContainer .welcome-text { 2611 display: flex; 2612 flex-direction: column; 2613 justify-content: center; 2614 align-items: center; 2615 margin: 0.5em 1em; 2616 transition: var(--transition); 2617 } 2618 .onboardingContainer .welcome-text h1, 2619 .onboardingContainer .welcome-text h2 { 2620 color: var(--text-color); 2621 line-height: 1.5; 2622 } 2623 .onboardingContainer .welcome-text h1 { 2624 font-size: 24px; 2625 font-weight: var(--heading-font-weight); 2626 margin: 0 6px; 2627 letter-spacing: -0.02em; 2628 outline: none; 2629 } 2630 .onboardingContainer .welcome-text h2 { 2631 font-size: 16px; 2632 font-weight: normal; 2633 margin: 10px 6px 0; 2634 max-width: 750px; 2635 letter-spacing: -0.01em; 2636 } 2637 .onboardingContainer .welcome-text.fancy h1 { 2638 background-image: linear-gradient(90deg, light-dark(#9059FF, #C688FF), light-dark(#FF4AA2, #FF84C0), light-dark(#FF8C00, #FFBD4F), light-dark(#FF4AA2, #FF84C0), light-dark(#9059FF, #C688FF)); 2639 background-clip: text; 2640 background-size: 200%; 2641 } 2642 @media (prefers-contrast: no-preference) { 2643 .onboardingContainer .welcome-text.fancy h1 { 2644 color: transparent; 2645 } 2646 } 2647 @media (prefers-color-scheme: dark) { 2648 .onboardingContainer .welcome-text.fancy h1::selection { 2649 color: #FFF; 2650 background-color: #696977; 2651 } 2652 } 2653 .onboardingContainer .welcome-text.shine h1 { 2654 animation: shine 50s linear infinite; 2655 background-size: 400%; 2656 } 2657 @keyframes shine { 2658 to { 2659 background-position: 400%; 2660 } 2661 } 2662 .onboardingContainer .welcome-text .cta-paragraph a { 2663 margin: 0; 2664 text-decoration: underline; 2665 cursor: pointer; 2666 } 2667 .onboardingContainer .screen.light-text .welcome-text.fancy h1 { 2668 background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF); 2669 } 2670 .onboardingContainer .screen.dark-text .welcome-text.fancy h1 { 2671 background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF); 2672 } 2673 .onboardingContainer .welcomeZap span { 2674 position: relative; 2675 z-index: 1; 2676 white-space: nowrap; 2677 } 2678 .onboardingContainer .welcomeZap .zap::after { 2679 display: block; 2680 background-repeat: no-repeat; 2681 background-size: 100% 100%; 2682 content: ""; 2683 position: absolute; 2684 top: calc(100% - 0.15em); 2685 width: 100%; 2686 height: 0.3em; 2687 left: 0; 2688 z-index: -1; 2689 transform: scaleY(3); 2690 } 2691 .onboardingContainer .welcomeZap .zap.short::after { 2692 background-image: url("chrome://activity-stream/content/data/content/assets/short-zap.svg"); 2693 } 2694 .onboardingContainer .welcomeZap .zap.long::after { 2695 background-image: url("chrome://activity-stream/content/data/content/assets/long-zap.svg"); 2696 } 2697 .onboardingContainer .language-loader { 2698 -moz-context-properties: fill; 2699 fill: currentColor; 2700 margin-inline-end: 10px; 2701 position: relative; 2702 top: 3px; 2703 width: 16px; 2704 height: 16px; 2705 margin-top: -6px; 2706 } 2707 .onboardingContainer .tiles-single-select-container { 2708 display: flex; 2709 flex-direction: column; 2710 align-items: center; 2711 margin: 10px auto; 2712 } 2713 .onboardingContainer .sr-only { 2714 opacity: 0; 2715 overflow: hidden; 2716 position: absolute; 2717 } 2718 .onboardingContainer .sr-only.input { 2719 height: 1px; 2720 width: 1px; 2721 } 2722 .onboardingContainer .tiles-single-select-section { 2723 border: 0; 2724 outline: none; 2725 display: flex; 2726 flex-wrap: wrap; 2727 gap: 5px; 2728 justify-content: space-evenly; 2729 margin-inline: 10px; 2730 padding: 10px; 2731 transition: var(--transition); 2732 } 2733 .onboardingContainer .tiles-single-select-section:hover, .onboardingContainer .tiles-single-select-section:active, .onboardingContainer .tiles-single-select-section:focus-within { 2734 border-radius: var(--border-radius-medium); 2735 outline: 2px solid var(--button-background-color-primary); 2736 } 2737 .onboardingContainer .tiles-single-select-section.single-select, .onboardingContainer .tiles-single-select-section.theme { 2738 flex-direction: row; 2739 padding-top: 5px; 2740 gap: 10px; 2741 justify-content: center; 2742 } 2743 .onboardingContainer .tiles-single-select-section.single-select .select-item, .onboardingContainer .tiles-single-select-section.theme .select-item { 2744 position: relative; 2745 padding-top: 5px; 2746 border: 1px solid var(--single-select-border-color); 2747 border-radius: var(--border-radius-large); 2748 } 2749 .onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.single-select .select-item:has(.selected), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.selected) { 2750 outline: none; 2751 } 2752 .onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.input:focus) { 2753 outline: 2px solid var(--button-background-color-primary); 2754 outline-offset: 5px; 2755 } 2756 .onboardingContainer .tiles-single-select-section.single-select .select-item:has(.selected), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.selected) { 2757 border: 1px solid var(--button-background-color-primary); 2758 border-radius: var(--border-radius-large); 2759 } 2760 .onboardingContainer .tiles-single-select-section.single-select .select-item:hover, .onboardingContainer .tiles-single-select-section.theme .select-item:hover { 2761 background-color: var(--single-select-hover-color); 2762 } 2763 .onboardingContainer .tiles-single-select-section.single-select .select-item:focus-visible, .onboardingContainer .tiles-single-select-section.theme .select-item:focus-visible { 2764 outline: none; 2765 } 2766 .onboardingContainer .tiles-single-select-section.single-select .select-item:focus-visible .icon, .onboardingContainer .tiles-single-select-section.theme .select-item:focus-visible .icon { 2767 outline: initial; 2768 } 2769 .onboardingContainer .tiles-single-select-section.single-select .select-item .flair, .onboardingContainer .tiles-single-select-section.theme .select-item .flair { 2770 height: 18px; 2771 border-radius: var(--border-radius-small); 2772 background-color: #9059FF; 2773 color: #FFF; 2774 padding: 2px 8px; 2775 position: absolute; 2776 right: 1px; 2777 top: -10px; 2778 line-height: 1; 2779 } 2780 .onboardingContainer .tiles-single-select-section.single-select .select-item .flair.centered, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.centered { 2781 /* stylelint-disable-next-line */ 2782 border-radius: 8px 8px 0 0; 2783 background-color: var(--button-background-color-primary); 2784 position: relative; 2785 right: unset; 2786 top: -6px; 2787 line-height: 0.75; 2788 width: 100%; 2789 box-sizing: border-box; 2790 } 2791 .onboardingContainer .tiles-single-select-section.single-select .select-item .flair.centered.backup, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.centered.backup { 2792 /* stylelint-disable-next-line */ 2793 border-radius: 10px 10px 0 0; 2794 background-color: var(--picker-backup-flair-background); 2795 color: var(--picker-backup-flair-color); 2796 } 2797 .onboardingContainer .tiles-single-select-section.single-select .select-item .flair.centered.backup.spacer, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.centered.backup.spacer { 2798 background-color: transparent; 2799 } 2800 .onboardingContainer .tiles-single-select-section.single-select .select-item .flair.spacer, .onboardingContainer .tiles-single-select-section.theme .select-item .flair.spacer { 2801 background-color: transparent; 2802 } 2803 .onboardingContainer .tiles-single-select-section.single-select .select-item .icon, .onboardingContainer .tiles-single-select-section.theme .select-item .icon { 2804 outline: none; 2805 } 2806 .onboardingContainer .tiles-single-select-section.single-select .select-item .text, .onboardingContainer .tiles-single-select-section.theme .select-item .text { 2807 margin-block: 8px; 2808 } 2809 .onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container { 2810 display: flex; 2811 flex-direction: column; 2812 margin-inline-start: 20px; 2813 } 2814 .onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-item, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-item { 2815 display: flex; 2816 } 2817 .onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-item:last-child, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-item:last-child { 2818 margin-block-end: 8px; 2819 } 2820 .onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-icon-wrapper, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-icon-wrapper { 2821 padding-block-start: 6px; 2822 } 2823 .onboardingContainer .tiles-single-select-section.single-select .select-item .tile-list-container .tile-list-text, .onboardingContainer .tiles-single-select-section.theme .select-item .tile-list-container .tile-list-text { 2824 margin-inline-start: 8px; 2825 margin-inline-end: 20px; 2826 text-align: start; 2827 } 2828 .onboardingContainer .tiles-single-select-section.single-select:hover, .onboardingContainer .tiles-single-select-section.single-select:focus-within, .onboardingContainer .tiles-single-select-section.theme:hover, .onboardingContainer .tiles-single-select-section.theme:focus-within { 2829 outline: none; 2830 } 2831 .onboardingContainer .tiles-single-select-section.single-select .select-item, .onboardingContainer .tiles-single-select-section.theme .select-item { 2832 transition: var(--transition); 2833 } 2834 .onboardingContainer .tiles-single-select-section.single-select .select-item:has(.input:focus), .onboardingContainer .tiles-single-select-section.theme .select-item:has(.input:focus) { 2835 outline: 2px solid var(--button-background-color-primary); 2836 outline-offset: 2px; 2837 } 2838 .onboardingContainer .tiles-single-select-section .select-item { 2839 align-items: center; 2840 display: flex; 2841 flex-direction: column; 2842 flex: 1; 2843 padding: 0; 2844 min-width: 50px; 2845 box-shadow: none; 2846 border-radius: var(--border-radius-small); 2847 cursor: pointer; 2848 z-index: 0; 2849 transition: var(--transition); 2850 } 2851 .onboardingContainer .tiles-single-select-section .select-item.backup { 2852 cursor: default; 2853 width: 225.5px; 2854 padding-top: 0; 2855 } 2856 .onboardingContainer .tiles-single-select-section .select-item.backup:has(.selected) { 2857 border: 1px solid var(--border-color-selected); 2858 } 2859 .onboardingContainer .tiles-single-select-section .select-item.backup:hover { 2860 background-color: transparent; 2861 } 2862 .onboardingContainer .tiles-single-select-section .select-item:focus, .onboardingContainer .tiles-single-select-section .select-item:active { 2863 outline: initial; 2864 outline-offset: initial; 2865 } 2866 .onboardingContainer .tiles-single-select-section .select-item .icon { 2867 background-size: cover; 2868 width: 40px; 2869 height: 40px; 2870 border-radius: var(--border-radius-small); 2871 z-index: -1; 2872 } 2873 .onboardingContainer .tiles-single-select-section .select-item .icon:dir(rtl) { 2874 transform: scaleX(-1); 2875 } 2876 .onboardingContainer .tiles-single-select-section .select-item .icon.light { 2877 background-image: url("resource://builtin-themes/light/icon.svg"); 2878 } 2879 .onboardingContainer .tiles-single-select-section .select-item .icon.dark { 2880 background-image: url("resource://builtin-themes/dark/icon.svg"); 2881 } 2882 .onboardingContainer .tiles-single-select-section .select-item .icon.alpenglow { 2883 background-image: url("resource://builtin-themes/alpenglow/icon.svg"); 2884 } 2885 .onboardingContainer .tiles-single-select-section .select-item .icon.default, .onboardingContainer .tiles-single-select-section .select-item .icon.automatic { 2886 background-image: url("resource://default-theme/icon.svg"); 2887 } 2888 .onboardingContainer .tiles-single-select-section .select-item .text { 2889 display: flex; 2890 font-size: 14px; 2891 font-weight: normal; 2892 line-height: 20px; 2893 margin-inline-start: 0; 2894 margin-top: 9px; 2895 } 2896 .onboardingContainer .tiles-single-select-section legend { 2897 cursor: default; 2898 } 2899 .onboardingContainer .tiles-container { 2900 margin: 10px auto; 2901 } 2902 .onboardingContainer .tiles-container.info { 2903 padding: 6px 12px 12px; 2904 } 2905 .onboardingContainer .tiles-container.info:hover, .onboardingContainer .tiles-container.info:focus { 2906 background-color: rgba(217, 217, 227, 0.3); 2907 border-radius: var(--border-radius-small); 2908 } 2909 .onboardingContainer .tiles-delayed { 2910 animation: fadein 0.4s; 2911 } 2912 .onboardingContainer .multi-select-container { 2913 display: flex; 2914 flex-direction: column; 2915 flex-wrap: wrap; 2916 flex-shrink: 0; 2917 align-items: flex-start; 2918 gap: 16px; 2919 margin-block: -1em 2em; 2920 margin-inline: 1em; 2921 font-weight: normal; 2922 font-size: 14px; 2923 text-align: initial; 2924 transition: var(--transition); 2925 z-index: 1; 2926 color: var(--text-color); 2927 } 2928 @media not (prefers-contrast) { 2929 .onboardingContainer .multi-select-container { 2930 color: light-dark(#5B5B66, #CFCFD8); 2931 } 2932 } 2933 .onboardingContainer .multi-select-container #multi-stage-multi-select-label { 2934 color: var(--text-color); 2935 line-height: 1.5; 2936 font-size: 16px; 2937 font-weight: normal; 2938 letter-spacing: -0.01em; 2939 margin: calc(0.5em + 10px) 6px 0; 2940 max-width: 750px; 2941 } 2942 .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label { 2943 margin: calc(-35px + 1em + 10px) 0 0; 2944 min-height: 1em; 2945 font-size: 15px; 2946 line-height: 1.5; 2947 } 2948 @media not (prefers-contrast) { 2949 .onboardingContainer .screen[pos=split] .multi-select-container #multi-stage-multi-select-label { 2950 color: light-dark(#5B5B66, #CFCFD8); 2951 } 2952 } 2953 2954 .onboardingContainer .multi-select-container .checkbox-container { 2955 display: flex; 2956 } 2957 .onboardingContainer .multi-select-container .checkbox-container > input { 2958 flex-grow: 0; 2959 flex-shrink: 0; 2960 } 2961 .onboardingContainer .confirmation-checklist-section { 2962 display: flex; 2963 flex-direction: column; 2964 align-items: center; 2965 margin: 10px auto; 2966 } 2967 .onboardingContainer .confirmation-checklist-section .confirmation-checklist-container { 2968 display: flex; 2969 flex-direction: column; 2970 gap: 8px; 2971 } 2972 .onboardingContainer .confirmation-checklist-section .confirmation-checklist-container .confirmation-checklist-item { 2973 display: flex; 2974 flex-direction: column; 2975 margin-inline-start: 20px; 2976 } 2977 .onboardingContainer .confirmation-checklist-section .confirmation-checklist-container .confirmation-checklist-item:last-child { 2978 margin-block-end: 8px; 2979 } 2980 .onboardingContainer .confirmation-checklist-section .confirmation-checklist-container .confirmation-checklist-icon-wrapper { 2981 display: flex; 2982 align-items: center; 2983 } 2984 .onboardingContainer .confirmation-checklist-section .confirmation-checklist-container .confirmation-checklist-text { 2985 margin-inline-start: 8px; 2986 font-weight: var(--font-weight-semibold); 2987 } 2988 .onboardingContainer .confirmation-checklist-section .confirmation-checklist-container .confirmation-checklist-subtext { 2989 margin-inline-start: 26px; 2990 text-align: start; 2991 font-size: 14px; 2992 } 2993 .onboardingContainer .mobile-downloads .qr-code-image { 2994 margin: 24px 0 10px; 2995 width: 113px; 2996 height: 113px; 2997 } 2998 .onboardingContainer .mobile-downloads .email-link { 2999 background: none; 3000 text-decoration: underline; 3001 cursor: pointer; 3002 color: var(--link-color); 3003 font-size: 16px; 3004 font-weight: normal; 3005 } 3006 .onboardingContainer .mobile-downloads .email-link:hover { 3007 color: var(--link-color-hover); 3008 } 3009 .onboardingContainer .mobile-downloads .email-link:active { 3010 color: var(--link-color-active); 3011 } 3012 @media (prefers-contrast) { 3013 .onboardingContainer .mobile-downloads .email-link:active { 3014 text-decoration: none; 3015 } 3016 } 3017 .onboardingContainer .mobile-downloads .email-link:hover { 3018 background: none; 3019 } 3020 .onboardingContainer .mobile-downloads .ios button { 3021 background-image: url("chrome://app-marketplace-icons/locale/ios.svg"); 3022 } 3023 .onboardingContainer .mobile-downloads .android button { 3024 background-image: url("chrome://app-marketplace-icons/locale/android.png"); 3025 } 3026 .onboardingContainer .mobile-download-buttons { 3027 list-style: none; 3028 padding: 10px 0; 3029 margin: 0; 3030 } 3031 .onboardingContainer .mobile-download-buttons li { 3032 display: inline-block; 3033 } 3034 .onboardingContainer .mobile-download-buttons li button { 3035 display: inline-block; 3036 height: 45px; 3037 width: 152px; 3038 background-repeat: no-repeat; 3039 background-size: contain; 3040 background-position: center; 3041 box-shadow: none; 3042 border: 0; 3043 } 3044 .onboardingContainer .mobile-download-buttons li:not(:first-child) { 3045 margin-inline: 5px 0; 3046 } 3047 .onboardingContainer .onboardingContainer .main-content.no-steps:has(button.content-tiles-header[aria-expanded=false]) { 3048 padding-bottom: 0; 3049 } 3050 .onboardingContainer #content-tiles-container button.tile-header, 3051 .onboardingContainer button.content-tiles-header { 3052 width: 100%; 3053 margin: 0; 3054 padding: 12px 16px; 3055 display: flex; 3056 flex-direction: row; 3057 align-items: center; 3058 border-width: 1px; 3059 border-radius: 0; 3060 cursor: pointer; 3061 outline-offset: -12px; 3062 } 3063 @media (prefers-contrast: no-preference) { 3064 .onboardingContainer #content-tiles-container button.tile-header, 3065 .onboardingContainer button.content-tiles-header { 3066 background-color: var(--background-color-canvas); 3067 border-color: var(--border-color); 3068 } 3069 } 3070 .onboardingContainer #content-tiles-container button.tile-header .arrow-icon, 3071 .onboardingContainer button.content-tiles-header .arrow-icon { 3072 width: 1em; 3073 height: 1.5em; 3074 -moz-context-properties: fill; 3075 fill: currentColor; 3076 background: url("chrome://global/skin/icons/arrow-down.svg") center center/100% no-repeat; 3077 } 3078 .onboardingContainer #content-tiles-container button.tile-header[aria-expanded=true], 3079 .onboardingContainer button.content-tiles-header[aria-expanded=true] { 3080 border-end-start-radius: 0; 3081 border-end-end-radius: 0; 3082 } 3083 .onboardingContainer #content-tiles-container button.tile-header[aria-expanded=true] .arrow-icon, 3084 .onboardingContainer button.content-tiles-header[aria-expanded=true] .arrow-icon { 3085 background: url("chrome://global/skin/icons/arrow-up.svg") center center/100% no-repeat; 3086 } 3087 .onboardingContainer button.content-tiles-header { 3088 margin: 0.5em 0 0; 3089 font-size: 11px; 3090 font-weight: normal; 3091 justify-content: center; 3092 border-width: 1px 0; 3093 } 3094 @media (prefers-contrast: no-preference) { 3095 .onboardingContainer button.content-tiles-header { 3096 color: light-dark(#5B5B66, #CFCFD8); 3097 } 3098 } 3099 @media (prefers-contrast) { 3100 .onboardingContainer button.content-tiles-header { 3101 color: var(--text-color); 3102 } 3103 } 3104 .onboardingContainer button.content-tiles-header .arrow-icon { 3105 margin-inline: 1em; 3106 } 3107 .onboardingContainer #content-tiles-container { 3108 --tiles-container-border-radius: var(--border-radius-medium); 3109 margin: 24px 48px; 3110 } 3111 .onboardingContainer #content-tiles-container .content-tile { 3112 display: flex; 3113 flex-direction: column; 3114 } 3115 .onboardingContainer #content-tiles-container .content-tile.has-header:first-of-type button.tile-header, .onboardingContainer #content-tiles-container .content-tile:not(.has-header) + .content-tile.has-header button.tile-header { 3116 border-start-start-radius: var(--tiles-container-border-radius); 3117 border-start-end-radius: var(--tiles-container-border-radius); 3118 } 3119 .onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header { 3120 border-end-start-radius: var(--tiles-container-border-radius); 3121 border-end-end-radius: var(--tiles-container-border-radius); 3122 } 3123 .onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header[aria-expanded=true] { 3124 border-end-start-radius: 0; 3125 border-end-end-radius: 0; 3126 } 3127 .onboardingContainer #content-tiles-container .content-tile.has-header:not(:has(+ .content-tile.has-header)) button.tile-header[aria-expanded=true] + .tile-content { 3128 border: 1px solid var(--border-color); 3129 border-top: none; 3130 border-radius: 0 0 var(--tiles-container-border-radius) var(--tiles-container-border-radius); 3131 } 3132 .onboardingContainer #content-tiles-container .content-tile.has-header:has(+ .content-tile.has-header) button.tile-header[aria-expanded=false] { 3133 border-bottom: none; 3134 } 3135 .onboardingContainer #content-tiles-container .content-tile button.tile-header { 3136 font-size: 13px; 3137 justify-content: space-between; 3138 } 3139 .onboardingContainer #content-tiles-container .content-tile button.tile-header + .tile-content { 3140 border-inline-start: 1px solid var(--border-color); 3141 border-inline-end: 1px solid var(--border-color); 3142 } 3143 .onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container { 3144 display: flex; 3145 flex-direction: column; 3146 } 3147 .onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-title { 3148 font-weight: var(--heading-font-weight); 3149 line-height: 1.5; 3150 } 3151 .onboardingContainer #content-tiles-container .content-tile button.tile-header .header-text-container .header-subtitle { 3152 font-weight: normal; 3153 line-height: 1.5; 3154 } 3155 .onboardingContainer #content-tiles-container .content-tile .multi-select-container { 3156 padding: 24px; 3157 margin: 0; 3158 } 3159 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker { 3160 display: flex; 3161 flex-flow: row wrap; 3162 box-sizing: border-box; 3163 } 3164 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker input[type=checkbox] { 3165 position: absolute; 3166 opacity: 0; 3167 width: 0; 3168 height: 0; 3169 } 3170 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container { 3171 display: flex; 3172 flex-direction: row; 3173 align-items: center; 3174 background-color: var(--picker-background-color); 3175 border: 1px solid var(--picker-border-color); 3176 padding: 8px 12px; 3177 border-radius: var(--border-radius-circle); 3178 user-select: none; 3179 } 3180 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:has(input:checked) { 3181 border-color: var(--picker-checked-border-color); 3182 border-width: 3px; 3183 margin: -2px; 3184 } 3185 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:has(input:checked):hover { 3186 border-color: var(--picker-hover-border-color); 3187 } 3188 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:hover { 3189 background-color: var(--picker-hover-background-color); 3190 border-color: var(--picker-hover-border-color); 3191 } 3192 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:hover .picker-icon.picker-checked { 3193 background-color: var(--picker-checkbox-hover-color); 3194 } 3195 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:focus-visible { 3196 outline: 2px solid var(--picker-focus-ring-color); 3197 outline-offset: 6px; 3198 } 3199 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container:focus-visible:has(input:checked) { 3200 outline-offset: 4px; 3201 } 3202 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container .picker-icon { 3203 border-radius: var(--border-radius-circle); 3204 width: 27px; 3205 height: 27px; 3206 display: flex; 3207 justify-content: center; 3208 align-items: center; 3209 text-align: center; 3210 margin-inline-end: 8px; 3211 font-size: 12px; 3212 forced-color-adjust: none; 3213 } 3214 .onboardingContainer #content-tiles-container .content-tile .multi-select-container.picker .checkbox-container .picker-icon.picker-checked { 3215 forced-color-adjust: auto; 3216 background-color: var(--picker-checkbox-color); 3217 mask: url("chrome://global/skin/icons/check.svg") center/15px no-repeat exclude, linear-gradient(#000 0 0); 3218 } 3219 .onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container { 3220 display: grid; 3221 } 3222 .onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container label, 3223 .onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container p { 3224 grid-column: 2; 3225 } 3226 .onboardingContainer #content-tiles-container .content-tile .multi-select-container .checkbox-container p { 3227 margin-block: 0.5em 0; 3228 } 3229 .onboardingContainer .tile-title-container { 3230 margin-inline: 0; 3231 margin-block: 10px 24px; 3232 text-align: start; 3233 transition: var(--transition); 3234 } 3235 .onboardingContainer .tile-title { 3236 font-size: 24px; 3237 font-weight: var(--heading-font-weight); 3238 margin-block: 0; 3239 } 3240 .onboardingContainer .tile-title:not(:last-child) { 3241 margin-block-end: 16px; 3242 } 3243 .onboardingContainer .tile-subtitle { 3244 font-size: 16px; 3245 margin-block: 0; 3246 } 3247 .onboardingContainer .dismiss-button { 3248 position: absolute; 3249 z-index: 2; 3250 top: 0; 3251 left: auto; 3252 right: 0; 3253 box-sizing: border-box; 3254 padding: 0; 3255 margin: 16px; 3256 display: block; 3257 float: inline-end; 3258 background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px; 3259 height: 32px; 3260 width: 32px; 3261 align-self: end; 3262 min-height: 32px; 3263 min-width: 32px; 3264 -moz-context-properties: fill; 3265 fill: currentColor; 3266 transition: var(--transition); 3267 } 3268 .onboardingContainer .dismiss-button:dir(rtl) { 3269 left: 0; 3270 right: auto; 3271 } 3272 .onboardingContainer .dismiss-button.with-background { 3273 background-color: var(--background-color-canvas); 3274 } 3275 .onboardingContainer .dismiss-button.with-background:hover { 3276 background-color: var(--button-background-color-hover); 3277 } 3278 .onboardingContainer .dismiss-button.with-background:active { 3279 background-color: var(--button-background-color-active); 3280 } 3281 @keyframes fadein { 3282 from { 3283 opacity: 0; 3284 } 3285 } 3286 .onboardingContainer .secondary-cta { 3287 display: flex; 3288 align-items: end; 3289 flex-direction: row; 3290 justify-content: center; 3291 font-size: 14px; 3292 transition: var(--transition); 3293 } 3294 .onboardingContainer .secondary-cta.top { 3295 justify-content: end; 3296 padding-inline-end: min(150px, 500px - 70vh); 3297 padding-top: 4px; 3298 position: absolute; 3299 top: 10px; 3300 inset-inline-end: 20px; 3301 z-index: 2; 3302 } 3303 .onboardingContainer .secondary-cta span { 3304 color: var(--grey-subtitle-1); 3305 margin: 0 4px; 3306 } 3307 .onboardingContainer .secondary-buttons-top-container { 3308 display: flex; 3309 flex-direction: row-reverse; 3310 position: fixed; 3311 top: 10px; 3312 inset-inline-end: 10px; 3313 width: auto; 3314 height: auto; 3315 z-index: 2; 3316 } 3317 .onboardingContainer .secondary-buttons-top-container .secondary-cta.top { 3318 position: relative; 3319 padding-top: 0; 3320 } 3321 .onboardingContainer .message-text { 3322 transition: var(--transition); 3323 } 3324 .onboardingContainer .helptext { 3325 padding: 1em; 3326 text-align: center; 3327 color: var(--grey-subtitle-1); 3328 font-size: 12px; 3329 line-height: 18px; 3330 } 3331 .onboardingContainer .helptext.default { 3332 align-self: center; 3333 max-width: 40%; 3334 } 3335 .onboardingContainer .helptext span { 3336 padding-inline-end: 4px; 3337 } 3338 .onboardingContainer .helptext-img { 3339 height: 1.5em; 3340 width: 1.5em; 3341 margin-inline-end: 4px; 3342 vertical-align: middle; 3343 } 3344 .onboardingContainer .helptext-img.end { 3345 margin: 4px; 3346 } 3347 .onboardingContainer .helptext-img.footer { 3348 vertical-align: bottom; 3349 } 3350 .onboardingContainer .steps { 3351 display: flex; 3352 flex-direction: row; 3353 justify-content: center; 3354 margin-top: 0; 3355 padding-block: 16px 0; 3356 transition: var(--transition); 3357 z-index: -1; 3358 height: 48px; 3359 box-sizing: border-box; 3360 } 3361 .onboardingContainer .steps.has-helptext { 3362 padding-bottom: 0; 3363 } 3364 .onboardingContainer .steps .indicator { 3365 width: 0; 3366 height: 0; 3367 margin-inline-end: 4px; 3368 margin-inline-start: 4px; 3369 background: var(--grey-subtitle-1); 3370 border-radius: var(--border-radius-small); 3371 border: 3px solid var(--button-text-color); 3372 opacity: 0.35; 3373 box-sizing: inherit; 3374 } 3375 .onboardingContainer .steps .indicator.current { 3376 opacity: 1; 3377 border-color: var(--button-background-color-primary); 3378 } 3379 .onboardingContainer .steps .indicator.current:last-of-type:first-of-type { 3380 opacity: 0; 3381 } 3382 .onboardingContainer .steps.progress-bar { 3383 height: 6px; 3384 padding-block: 0; 3385 margin-block: 42px 0; 3386 background-color: color-mix(in srgb, var(--button-text-color) 25%, transparent); 3387 justify-content: start; 3388 opacity: 1; 3389 transition: none; 3390 } 3391 .onboardingContainer .steps.progress-bar .indicator { 3392 width: 100%; 3393 height: 100%; 3394 margin-inline: -1px; 3395 background-color: var(--button-background-color-primary); 3396 border: 0; 3397 border-radius: 0; 3398 opacity: 1; 3399 transition: var(--progress-bar-transition); 3400 translate: calc(var(--progress-bar-progress, 0%) - 100%); 3401 } 3402 .onboardingContainer .steps.progress-bar .indicator:dir(rtl) { 3403 translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%); 3404 } 3405 .onboardingContainer .additional-cta-container[flow] { 3406 display: flex; 3407 flex-flow: column wrap; 3408 align-items: center; 3409 } 3410 .onboardingContainer .additional-cta-container[flow][flow=row] { 3411 flex-direction: row; 3412 justify-content: center; 3413 } 3414 .onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta { 3415 flex-basis: 100%; 3416 } 3417 .onboardingContainer .legal-paragraph { 3418 transition: var(--transition); 3419 } 3420 .onboardingContainer .primary, 3421 .onboardingContainer .secondary, 3422 .onboardingContainer .additional-cta, 3423 .onboardingContainer .submenu-button { 3424 font-size: 13px; 3425 line-height: 16px; 3426 padding: 11px 15px; 3427 transition: var(--transition); 3428 } 3429 .onboardingContainer .primary.rtamo, 3430 .onboardingContainer .secondary.rtamo, 3431 .onboardingContainer .additional-cta.rtamo, 3432 .onboardingContainer .submenu-button.rtamo { 3433 margin-top: 24px; 3434 } 3435 .onboardingContainer .primary.slim, 3436 .onboardingContainer .secondary.slim, 3437 .onboardingContainer .additional-cta.slim, 3438 .onboardingContainer .submenu-button.slim { 3439 padding: 0; 3440 } 3441 .onboardingContainer .secondary { 3442 background-color: var(--button-background-color); 3443 color: var(--button-text-color); 3444 } 3445 .onboardingContainer .split-button-container, 3446 .onboardingContainer .screen .action-buttons .split-button-container { 3447 align-items: stretch; 3448 } 3449 .onboardingContainer .split-button-container:not([hidden]), 3450 .onboardingContainer .screen .action-buttons .split-button-container:not([hidden]) { 3451 display: flex; 3452 } 3453 .onboardingContainer .split-button-container .primary:not(.submenu-button), 3454 .onboardingContainer .split-button-container .secondary:not(.submenu-button), 3455 .onboardingContainer .split-button-container .additional-cta:not(.submenu-button), 3456 .onboardingContainer .screen .action-buttons .split-button-container .primary:not(.submenu-button), 3457 .onboardingContainer .screen .action-buttons .split-button-container .secondary:not(.submenu-button), 3458 .onboardingContainer .screen .action-buttons .split-button-container .additional-cta:not(.submenu-button) { 3459 border-start-end-radius: 0; 3460 border-end-end-radius: 0; 3461 margin-inline-end: 0; 3462 } 3463 .onboardingContainer .split-button-container .primary:focus-visible, 3464 .onboardingContainer .split-button-container .secondary:focus-visible, 3465 .onboardingContainer .split-button-container .additional-cta:focus-visible, 3466 .onboardingContainer .screen .action-buttons .split-button-container .primary:focus-visible, 3467 .onboardingContainer .screen .action-buttons .split-button-container .secondary:focus-visible, 3468 .onboardingContainer .screen .action-buttons .split-button-container .additional-cta:focus-visible { 3469 z-index: 2; 3470 } 3471 .onboardingContainer .split-button-container .submenu-button, 3472 .onboardingContainer .screen .action-buttons .split-button-container .submenu-button { 3473 border-start-start-radius: 0; 3474 border-end-start-radius: 0; 3475 margin-inline-start: 1px; 3476 padding: 8px; 3477 min-width: 30px; 3478 box-sizing: border-box; 3479 background-image: url("chrome://global/skin/icons/arrow-down.svg"); 3480 background-repeat: no-repeat; 3481 background-size: 16px; 3482 background-position: center; 3483 -moz-context-properties: fill; 3484 fill: currentColor; 3485 } 3486 .onboardingContainer .noodle { 3487 display: block; 3488 background-repeat: no-repeat; 3489 background-size: 100% 100%; 3490 position: absolute; 3491 transition: var(--transition); 3492 } 3493 .onboardingContainer .noodle:dir(rtl) { 3494 scale: -1 1; 3495 } 3496 .onboardingContainer .outline-L { 3497 background-image: url("chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg"); 3498 } 3499 .onboardingContainer .solid-L { 3500 background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg"); 3501 -moz-context-properties: fill; 3502 fill: var(--background-color-canvas); 3503 display: none; 3504 } 3505 .onboardingContainer .purple-C { 3506 background-image: url("chrome://activity-stream/content/data/content/assets/noodle-C.svg"); 3507 -moz-context-properties: fill; 3508 fill: #E7258C; 3509 } 3510 .onboardingContainer .orange-L { 3511 background-image: url("chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg"); 3512 -moz-context-properties: fill; 3513 fill: #FFA437; 3514 } 3515 .onboardingContainer .screen-1 .section-main { 3516 z-index: 1; 3517 margin: auto; 3518 } 3519 .onboardingContainer .screen-1 .section-main.system-prompt-spotlight { 3520 margin-top: 100px; 3521 margin-inline: auto; 3522 } 3523 .onboardingContainer .screen-1 .outline-L { 3524 width: 87px; 3525 height: 80px; 3526 transform: rotate(10deg) translate(-30%, 200%); 3527 transition-delay: 0.4s; 3528 z-index: 2; 3529 } 3530 .onboardingContainer .screen-1 .orange-L { 3531 width: 550px; 3532 height: 660px; 3533 transform: rotate(-155deg) translate(11%, -18%); 3534 transition-delay: 0.2s; 3535 } 3536 .onboardingContainer .screen-1 .purple-C { 3537 width: 310px; 3538 height: 260px; 3539 transform: translate(-18%, -67%); 3540 } 3541 .onboardingContainer .screen-1 .yellow-circle { 3542 width: 165px; 3543 height: 165px; 3544 border-radius: var(--border-radius-circle); 3545 transform: translate(230%, -5%); 3546 background: #952BB9; 3547 transition-delay: -0.2s; 3548 } 3549 .onboardingContainer .dialog-initial .brand-logo { 3550 transition-delay: 0.6s; 3551 } 3552 .onboardingContainer .dialog-initial .welcome-text { 3553 transition-delay: 0.8s; 3554 } 3555 .onboardingContainer .dialog-initial .tiles-single-select-section, 3556 .onboardingContainer .dialog-initial .inline-image, 3557 .onboardingContainer .dialog-initial .link-paragraph, 3558 .onboardingContainer .dialog-initial .multi-select-container, 3559 .onboardingContainer .dialog-initial migration-wizard, 3560 .onboardingContainer .dialog-initial turn-on-scheduled-backups::part(form) { 3561 transition-delay: 0.9s; 3562 } 3563 .onboardingContainer .dialog-initial .primary, 3564 .onboardingContainer .dialog-initial .secondary, 3565 .onboardingContainer .dialog-initial .secondary-cta, 3566 .onboardingContainer .dialog-initial .steps, 3567 .onboardingContainer .dialog-initial .cta-link, 3568 .onboardingContainer .dialog-initial .legal-paragraph, 3569 .onboardingContainer .dialog-initial .steps[above-button]:not(.progress-bar) { 3570 transition-delay: 1s; 3571 } 3572 .onboardingContainer .screen:not(.dialog-initial) .tiles-single-select-section, 3573 .onboardingContainer .screen:not(.dialog-initial) .inline-image, 3574 .onboardingContainer .screen:not(.dialog-initial) .link-paragraph, 3575 .onboardingContainer .screen:not(.dialog-initial) .multi-select-container { 3576 transition-delay: 0.2s; 3577 } 3578 .onboardingContainer .screen:not(.dialog-initial) .primary, 3579 .onboardingContainer .screen:not(.dialog-initial) .secondary, 3580 .onboardingContainer .screen:not(.dialog-initial) .secondary-cta, 3581 .onboardingContainer .screen:not(.dialog-initial) .cta-link, 3582 .onboardingContainer .screen:not(.dialog-initial) .legal-paragraph, 3583 .onboardingContainer .screen:not(.dialog-initial) .steps[above-button]:not(.progress-bar) { 3584 transition-delay: 0.4s; 3585 } 3586 .onboardingContainer .screen-2 .section-main { 3587 z-index: 1; 3588 margin: auto; 3589 } 3590 .onboardingContainer .screen-2 .section-main.system-prompt-spotlight { 3591 margin-top: 100px; 3592 margin-inline: auto; 3593 } 3594 .onboardingContainer .screen-2 .outline-L { 3595 width: 87px; 3596 height: 80px; 3597 transform: rotate(250deg) translate(-420%, 425%); 3598 transition-delay: 0.2s; 3599 z-index: 2; 3600 } 3601 .onboardingContainer .screen-2 .orange-L { 3602 height: 800px; 3603 width: 660px; 3604 transform: rotate(35deg) translate(-10%, -7%); 3605 transition-delay: -0.4s; 3606 } 3607 .onboardingContainer .screen-2 .purple-C { 3608 width: 392px; 3609 height: 394px; 3610 transform: rotate(260deg) translate(-34%, -35%); 3611 transition-delay: -0.2s; 3612 fill: #952BB9; 3613 } 3614 .onboardingContainer .screen-2 .yellow-circle { 3615 width: 165px; 3616 height: 165px; 3617 border-radius: var(--border-radius-circle); 3618 transform: translate(160%, 130%); 3619 background: #E7258C; 3620 } 3621 .onboardingContainer.transition-in .noodle { 3622 opacity: 0; 3623 rotate: var(--rotate); 3624 scale: var(--scale); 3625 } 3626 .onboardingContainer.transition-in .dialog-initial .main-content, 3627 .onboardingContainer.transition-in .dialog-initial .dismiss-button { 3628 translate: 0 calc(-2 * var(--translate)); 3629 } 3630 .onboardingContainer.transition-in .dialog-initial .brand-logo, 3631 .onboardingContainer.transition-in .dialog-initial .steps { 3632 opacity: 0; 3633 translate: 0 calc(-1 * var(--translate)); 3634 } 3635 .onboardingContainer.transition-in .screen .welcome-text, 3636 .onboardingContainer.transition-in .screen .multi-select-container, 3637 .onboardingContainer.transition-in .screen .tiles-single-select-section, 3638 .onboardingContainer.transition-in .screen .link-paragraph, 3639 .onboardingContainer.transition-in .screen .inline-image, 3640 .onboardingContainer.transition-in .screen .primary, 3641 .onboardingContainer.transition-in .screen .checkbox-container:not(.multi-select-item), 3642 .onboardingContainer.transition-in .screen .secondary, 3643 .onboardingContainer.transition-in .screen .secondary-cta:not(.top), 3644 .onboardingContainer.transition-in .screen .cta-link, 3645 .onboardingContainer.transition-in .screen .legal-paragraph, 3646 .onboardingContainer.transition-in .screen migration-wizard, 3647 .onboardingContainer.transition-in .screen turn-on-scheduled-backups::part(form), 3648 .onboardingContainer.transition-in .screen .tile-title-container, 3649 .onboardingContainer.transition-in .screen .steps[above-button]:not(.progress-bar) { 3650 opacity: 0; 3651 translate: 0 calc(-1 * var(--translate)); 3652 } 3653 .onboardingContainer.transition-in .screen:not(.dialog-initial) .steps:not(.progress-bar, [above-button]) { 3654 opacity: 0.2; 3655 } 3656 .onboardingContainer .system-prompt-spotlight .inline-icon-container { 3657 display: flex; 3658 } 3659 .onboardingContainer .system-prompt-spotlight .welcome-text { 3660 align-items: flex-start; 3661 padding: 5px; 3662 } 3663 .onboardingContainer .system-prompt-spotlight .welcome-text h2 { 3664 text-align: start; 3665 margin: 0; 3666 margin-block: 10px 15px; 3667 } 3668 .onboardingContainer .system-prompt-spotlight .brand-logo { 3669 margin-block: 2px; 3670 } 3671 .onboardingContainer .system-prompt-spotlight .multi-select-container { 3672 margin-inline-start: 23px; 3673 margin-block-end: 17px; 3674 } 3675 .onboardingContainer .system-prompt-spotlight .additional-cta-container { 3676 display: flex; 3677 flex-direction: row-reverse; 3678 padding-inline-end: 15px; 3679 } 3680 .onboardingContainer .system-prompt-spotlight .main-content.no-steps { 3681 padding-bottom: 12px; 3682 margin-inline: auto; 3683 } 3684 .onboardingContainer.transition-out .noodle { 3685 opacity: 0; 3686 rotate: var(--rotate); 3687 scale: var(--scale); 3688 transition-delay: 0.2s; 3689 } 3690 .onboardingContainer.transition-out .screen:not(.dialog-last) .main-content { 3691 overflow: hidden; 3692 } 3693 .onboardingContainer.transition-out .screen:not(.dialog-last) .welcome-text, 3694 .onboardingContainer.transition-out .screen:not(.dialog-last) .multi-select-container { 3695 opacity: 0; 3696 translate: 0 var(--translate); 3697 transition-delay: 0.1s; 3698 } 3699 .onboardingContainer.transition-out .screen:not(.dialog-last) .tiles-single-select-section, 3700 .onboardingContainer.transition-out .screen:not(.dialog-last) .inline-image, 3701 .onboardingContainer.transition-out .screen:not(.dialog-last) .link-paragraph, 3702 .onboardingContainer.transition-out .screen:not(.dialog-last) migration-wizard, 3703 .onboardingContainer.transition-out .screen:not(.dialog-last) turn-on-scheduled-backups::part(form) { 3704 opacity: 0; 3705 translate: 0 var(--translate); 3706 transition-delay: 0.2s; 3707 } 3708 .onboardingContainer.transition-out .screen:not(.dialog-last) .primary, 3709 .onboardingContainer.transition-out .screen:not(.dialog-last) .checkbox-container:not(.multi-select-item), 3710 .onboardingContainer.transition-out .screen:not(.dialog-last) .secondary, 3711 .onboardingContainer.transition-out .screen:not(.dialog-last) .secondary-cta:not(.top), 3712 .onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link, 3713 .onboardingContainer.transition-out .screen:not(.dialog-last) .legal-paragraph, 3714 .onboardingContainer.transition-out .screen:not(.dialog-last) .steps[above-button]:not(.progress-bar) { 3715 opacity: 0; 3716 translate: 0 var(--translate); 3717 transition-delay: 0.3s; 3718 } 3719 .onboardingContainer.transition-out .screen:not(.dialog-last) .steps:not(.progress-bar, [above-button]) { 3720 opacity: 0.2; 3721 transition-delay: 0.5s; 3722 } 3723 .onboardingContainer.transition-out .dialog-last .noodle { 3724 transition-delay: 0s; 3725 } 3726 .onboardingContainer.transition-out .dialog-last .main-content, 3727 .onboardingContainer.transition-out .dialog-last .dismiss-button { 3728 opacity: 0; 3729 translate: 0 calc(2 * var(--translate)); 3730 transition-delay: 0.4s; 3731 } 3732 .onboardingContainer .inline-image, 3733 .onboardingContainer .link-paragraph { 3734 transition: var(--transition); 3735 } 3736 .onboardingContainer migration-wizard { 3737 width: unset; 3738 transition: var(--transition); 3739 } 3740 .onboardingContainer migration-wizard::part(buttons) { 3741 margin-top: 24px; 3742 justify-content: flex-start; 3743 } 3744 .onboardingContainer migration-wizard::part(deck) { 3745 font-size: 0.83em; 3746 } 3747 .onboardingContainer turn-on-scheduled-backups::part(form) { 3748 transition: var(--transition); 3749 border: 1px solid var(--border-color); 3750 border-radius: var(--border-radius-medium); 3751 padding: 24px 30px; 3752 margin-block: 0 24px; 3753 }