migration-wizard.css (9574B)
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 5 @import url("chrome://global/skin/global.css"); 6 @import url("chrome://global/skin/in-content/common.css"); 7 8 :host { 9 display: flex; 10 flex-direction: column; 11 text-align: start; 12 width: 22.34em; 13 } 14 15 h1 { 16 font-size: var(--embedded-wizard-header-font-size, 1.3em); 17 font-weight: var(--embedded-wizard-header-font-weight, normal); 18 margin-block: var(--embedded-wizard-header-margin-block, 0 16px); 19 min-height: 1em; 20 } 21 22 ol { 23 padding-inline-start: 24px; 24 margin-block: 16px 0; 25 } 26 27 li:not(:last-child) { 28 margin-block-end: 16px; 29 } 30 31 input[type="checkbox"] { 32 margin-block: 0; 33 } 34 35 div[name="page-loading"] > .buttons > button { 36 color: transparent; 37 } 38 39 .loading-block { 40 background-color: var(--button-background-color); 41 border-radius: var(--border-radius-small); 42 opacity: 0.4; 43 margin-block-start: 16px; 44 } 45 46 .loading-block.large { 47 height: 36px; 48 } 49 50 .loading-block.small { 51 height: 16px; 52 } 53 54 .buttons { 55 margin-block-start: 16px; 56 } 57 58 fieldset { 59 border: 0; 60 } 61 62 label:not([hidden]) { 63 display: flex; 64 align-items: center; 65 width: fit-content; 66 } 67 68 #wizard-deck > div { 69 display: flex; 70 flex-direction: column; 71 } 72 73 #browser-profile-selector { 74 display: flex; 75 align-items: center; 76 padding: 8px; 77 margin: 0; 78 font-weight: unset; 79 } 80 81 .migrator-icon { 82 content: url(chrome://global/skin/icons/defaultFavicon.svg); 83 height: 32px; 84 width: 32px; 85 -moz-context-properties: fill; 86 fill: currentColor; 87 } 88 89 .migrator-icon, 90 .migrator-description, 91 .dropdown-icon { 92 pointer-events: none; 93 } 94 95 .dropdown-icon { 96 content: url("chrome://global/skin/icons/arrow-down.svg"); 97 -moz-context-properties: fill; 98 fill: currentColor; 99 height: 16px; 100 width: 16px; 101 } 102 103 .migrator-description { 104 display: flex; 105 flex: 1; 106 flex-direction: column; 107 justify-content: center; 108 align-items: start; 109 margin-inline-start: 11px; 110 } 111 112 #profile-name:empty { 113 display: none; 114 } 115 116 #profile-name { 117 font-size: 0.73em; 118 text-transform: uppercase; 119 } 120 121 /** 122 * When the panel-list is embedded in a XUL panel, we don't want the default 123 * padding that a XUL panel gets. 124 */ 125 panel { 126 --panel-padding: 0; 127 } 128 129 panel-item::part(button) { 130 min-height: 40px; 131 } 132 133 panel-item[type="file"]::part(button) { 134 background-size: 20px; 135 background-position: 6px center; 136 } 137 138 @media (forced-colors) { 139 panel-item:not(.selected)::part(button):hover { 140 fill: SelectedItemText; 141 color: SelectedItem; 142 } 143 144 panel-item.selected::part(button) { 145 border-block: 1px solid ButtonText; 146 } 147 } 148 149 panel-item.selected { 150 background-color: var(--button-background-color-active); 151 color: var(--button-text-color-active); 152 } 153 154 panel-item[type="file"]:-moz-locale-dir(rtl)::part(button), 155 panel-item[type="file"]:dir(rtl)::part(button) { 156 background-position-x: right 6px; 157 } 158 159 div[name="page-selection"]:not([show-import-all]) #select-all, 160 div[name="page-selection"][show-import-all][single-item] #select-all, 161 div[name="page-selection"]:not([show-import-all]) summary { 162 display: none; 163 } 164 165 div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all) { 166 margin-inline: var(--resource-type-label-margin-inline, 24px 0); 167 } 168 169 div[name="page-selection"][show-import-all] #select-all { 170 display: flex; 171 } 172 173 div[name="page-selection"][show-import-all][hide-select-all] #select-all { 174 display: none; 175 } 176 177 div[name="page-selection"][migrator-type="browser"] > .buttons > #import-from-file, 178 div[name="page-selection"][migrator-type="browser"][no-permissions] > .buttons > #import, 179 div[name="page-selection"][migrator-type="browser"]:not([no-permissions]) > .buttons > #get-permissions, 180 div[name="page-selection"][migrator-type="file"] > .buttons > #get-permissions, 181 div[name="page-selection"][migrator-type="file"] > .buttons > #import, 182 div[name="page-selection"][migrator-type="file"] > .resource-selection-details, 183 div[name="page-selection"][migrator-type="file"] > .resource-selection-preamble, 184 div[name="page-selection"][show-import-all] .resource-selection-preamble { 185 display: none; 186 } 187 188 /** 189 * We're using <code> to ease legibility for paths on 190 * the user's system, but intentionally reduce the font 191 * size to more closely match the surrounding text. 192 */ 193 .migration-no-permissions-instructions-step2 > code { 194 font-size: 0.94em; 195 } 196 197 .resource-selection-preamble { 198 margin-block-start: 16px; 199 } 200 201 details[open] .expand-collapse-icon { 202 content: url("chrome://global/skin/icons/minus.svg"); 203 } 204 205 .expand-collapse-icon { 206 display: inline-block; 207 width: 16px; 208 height: 16px; 209 content: url("chrome://global/skin/icons/plus.svg"); 210 grid-area: b; 211 -moz-context-properties: fill; 212 fill: currentColor; 213 justify-self: end; 214 margin-inline-end: 8px; 215 } 216 217 details:not([open]) summary { 218 margin-block-end: 16px; 219 } 220 221 summary { 222 cursor: pointer; 223 } 224 225 #resource-type-list { 226 padding: 0; 227 } 228 229 #resource-type-list > label { 230 margin-block: var(--resource-type-label-margin-block, 16px 0); 231 margin-inline: var(--resource-type-label-margin-inline, 0); 232 } 233 234 :host(:not([dialog-mode])) .cancel-close, 235 :host(:not([dialog-mode])) .done-button, 236 :host([dialog-mode]) .continue-button { 237 display: none; 238 } 239 240 .resource-progress { 241 display: grid; 242 gap: 16px; 243 } 244 245 .resource-progress-group { 246 display: grid; 247 grid-template-columns: min-content auto; 248 grid-template-areas: 249 "icon type" 250 "icon status" 251 "icon support"; 252 align-items: center; 253 justify-items: start; 254 } 255 256 .resource-progress-group[hidden] { 257 display: none; 258 } 259 260 .message-text, 261 .error-text { 262 grid-area: status; 263 } 264 265 .support-text { 266 grid-area: support; 267 } 268 269 /** 270 * Workaround for bug 1671784, which shows a slight outline around the 271 * rotating masked element. 272 */ 273 .progress-icon-parent { 274 /* stylelint rule disabled to support workaround for Bug 1671784 */ 275 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 276 border-radius: 0.01px; 277 overflow: hidden; 278 display: flex; 279 align-items: center; 280 } 281 282 .progress-icon { 283 display: inline-block; 284 width: 16px; 285 height: 16px; 286 -moz-context-properties: fill; 287 margin-inline-end: 8px; 288 } 289 290 /** 291 * For now, both the success and info icon states appear the same. 292 */ 293 .progress-icon[state="success"], 294 .progress-icon[state="info"] { 295 content: url("chrome://browser/skin/migration/success.svg"); 296 fill: var(--icon-color-success); 297 } 298 299 .progress-icon[state="warning"] { 300 content: url("chrome://global/skin/icons/warning.svg"); 301 fill: var(--icon-color-warning); 302 } 303 304 @media (prefers-reduced-motion: reduce) { 305 .progress-icon[state="loading"] { 306 content: url("chrome://global/skin/icons/loading.svg"); 307 fill: var(--text-color-deemphasized); 308 } 309 } 310 311 @media (prefers-reduced-motion: no-preference) { 312 .progress-icon[state="loading"] { 313 content: ""; 314 background-image: conic-gradient(rgba(255, 255, 255, 0.31) 0%, rgba(255, 189, 79, 0.57) 38%, rgba(255, 74, 162, 0.79) 70%, rgb(144, 89, 255) 100%); 315 mask: url("chrome://browser/skin/migration/progress-mask.svg"); 316 mask-composite: exclude; 317 animation-name: rotate; 318 animation-duration: 1s; 319 animation-iteration-count: infinite; 320 animation-timing-function: linear; 321 } 322 } 323 324 @keyframes rotate { 325 from { 326 transform: rotate(0deg); 327 } 328 329 to { 330 transform: rotate(360deg); 331 } 332 } 333 334 .error-icon { 335 content: url("chrome://global/skin/icons/error.svg"); 336 -moz-context-properties: fill; 337 fill: var(--icon-color-critical); 338 margin-block: 0; 339 margin-inline: 0 8px; 340 width: 16px; 341 height: 16px; 342 } 343 344 .page-portrait-icon { 345 width: 16px; 346 height: 16px; 347 content: url("chrome://global/skin/icons/page-portrait.svg"); 348 -moz-context-properties: fill; 349 fill: currentColor; 350 vertical-align: middle; 351 } 352 353 .safari-icon-3dots, 354 .chrome-icon-3dots { 355 width: 16px; 356 height: 16px; 357 -moz-context-properties: fill, stroke; 358 vertical-align: middle; 359 } 360 361 .safari-icon-3dots { 362 content: url("chrome://browser/skin/migration/safari-icon-3dots.svg"); 363 fill: currentColor; 364 stroke: color-mix(in srgb, currentColor 10%, transparent 90%); 365 } 366 367 .chrome-icon-3dots { 368 content: url("chrome://browser/skin/migration/chrome-icon-3dots.svg"); 369 /** 370 * Stroke and fill colours were sampled from built-in dark and light theme 371 * from Chrome on Windows 372 */ 373 fill: light-dark(#474747, #c7c7c7); 374 stroke: light-dark(#474747, #c7c7c7); 375 } 376 377 .no-browsers-found-message { 378 display: flex; 379 } 380 381 .error-message { 382 display: flex; 383 align-items: start; 384 } 385 386 .file-import-error, 387 .no-resources-found { 388 font-size: 0.84em; 389 margin-block-start: 16px; 390 } 391 392 .file-import-error { 393 margin-inline-start: 8px; 394 } 395 396 div[name="page-selection"]:not([no-resources]) .no-resources-found, 397 div[name="page-selection"]:not([no-permissions]) .no-permissions-message, 398 div[name="page-selection"]:is([no-resources], [no-permissions]) .hide-on-error, 399 div[name="page-selection"]:not([file-import-error]) .file-import-error { 400 display: none; 401 } 402 403 div[name="page-selection"][show-import-all] .resource-selection-details { 404 padding-inline-start: 8px; 405 } 406 407 .resource-selection-details > summary { 408 list-style: none; 409 display: grid; 410 grid-template-areas: 411 "a b" 412 "c b"; 413 margin-block: 16px 0; 414 } 415 416 :host([hide-option-expander-subtitle]) .selected-data { 417 display: none; 418 } 419 420 p.migration-wizard-subheader { 421 font-size: var(--embedded-wizard-subheader-font-size, 0.85em); 422 font-weight: var(--embedded-wizard-subheader-font-weight, normal); 423 margin-block: var(--embedded-wizard-subheader-margin-block, 0 28px); 424 line-height: 1.2em; 425 426 &[hidden] { 427 display: none; 428 } 429 }