diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/aboutImport.css')
-rw-r--r-- | comm/mail/themes/shared/mail/aboutImport.css | 431 |
1 files changed, 431 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/aboutImport.css b/comm/mail/themes/shared/mail/aboutImport.css new file mode 100644 index 0000000000..9d81f4a029 --- /dev/null +++ b/comm/mail/themes/shared/mail/aboutImport.css @@ -0,0 +1,431 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, you can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://messenger/skin/colors.css"); + +:root { + --main-title-size: 1.8rem; + --title-icon-margin: 8px; +} + +*[hidden] { + display: none !important; +} + +body { + text-shadow: none; + background-color: rgba(0, 0, 0, 0.03); +} + +h1 { + padding-top: 0; + margin: 0 0 8px; + font-size: var(--main-title-size); + font-weight: 300; + line-height: 1.3; +} + +h2 { + margin: 0 0 4px; + font-size: 1.4rem; + font-weight: 600; + line-height: 1.4; +} + +.light-heading { + font-weight: 300; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +p { + line-height: 1.8em; + margin: 0; +} + +progress { + width: 100%; +} + +dl { + display: grid; + grid-template-columns: [label] max-content [value] minmax(min-content, auto); + column-gap: 1ch; +} + +dl div { + display: grid; + grid-column: 1 / 3; + grid-template-columns: subgrid; + grid-template-rows: subgrid; +} + +dt { + font-weight: 600; + grid-area: label; +} + +dd { + grid-area: value; + margin: 0; +} + +#csvFieldMap table { + margin-top: 1rem; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + font-size: 1rem; +} + +#csvFieldMap th { + font-weight: 600; +} + +#csvFieldMap th, +#csvFieldMap td { + border-bottom: 1px solid var(--in-content-page-color); +} + +#csvFieldMap th:last-child { + width: 2rem; +} + +#csvFieldMap td:last-child { + text-align: end; +} + +#csvFieldMap { + margin-top: 2rem; + display: block; +} + +#csvFieldMap select { + line-height: 1.2; + background-position-x: right 10px; + padding-inline-start: 8px; + margin-inline-start: 0; + width: 100%; +} + +#csvFieldMap select:dir(rtl) { + background-position-x: left 10px; +} + +#csvFieldMap input { + margin-top: 4px; +} + +#main { + margin: 4em; + min-width: 400px; + max-width: 600px; +} + +#main .buttons-container { + margin-top: 1.5em; + display: flex; + justify-content: space-between; +} + +#main .buttons-container button { + margin: 0; +} + +#main .buttons-container .continue { + margin-inline-start: auto; +} + +.tabPane > section { + background-color: var(--in-content-box-background); + border-radius: var(--in-content-button-border-radius); + padding: 2em calc(var(--main-title-size) + var(--title-icon-margin) + 1em); +} + +.tabPane h1 { + position: relative; +} + +.tabPane h1::before { + content: ""; + background-repeat: no-repeat; + background-position: bottom center; + display: inline-block; + width: 24px; + height: 24px; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; + color: var(--primary); + margin-inline-end: var(--title-icon-margin); + position: absolute; + inset-inline-start: calc(-1 * (var(--main-title-size) + var(--title-icon-margin))); +} + +#tabPane-start.tabPane h1::before { + background-image: var(--icon-import-lg); +} + +#tabPane-export.tabPane h1::before { + background-image: var(--icon-export-lg); +} + +.source-list { + padding: 1em 0; +} + +.profile-list { + padding-top: 0.5em; +} + +.option-list { + padding: 1em 0; + list-style: none; +} + +#calendarItemsTools { + margin-top: 1rem; + display: flex; + align-items: center; +} + +#calendarItemsTools input { + flex: 1; + padding-inline: 0.5rem; + height: 32px; +} + +#calendar-item-list { + height: 60vh; + overflow: auto; + background-color: rgba(215, 215, 219, 0.2); + margin-top: 1rem; + margin-inline: 2px; +} + +.calendar-item-wrapper { + margin: 1rem; + padding: 1rem; + display: flex; + background: var(--in-content-page-background); +} + +.notificationbox-stack notification-message:last-child { + margin-block-end: 12px; +} + +/* Override common.css */ +.toggle-container-with-text { + grid-template-columns: min-content 1fr; + display: grid; + grid-template-areas: + "i text" + ". desc"; + margin-block: 1em; + line-height: 1.5; +} + +.toggle-container-with-text:last-child { + margin-block-end: 0; +} + +.toggle-container-with-text input { + grid-area: i; +} + +.toggle-container-with-text p:last-of-type { + grid-area: desc; +} + +.toggle-container-with-text p:first-of-type { + grid-area: text; +} + +.toggle-container-with-text .tip-caption dt { + color: var(--in-content-page-color); +} + +#tabPane-export p { + margin-bottom: 1rem; +} + +/* Override calendar-item-summary.css */ +calendar-item-summary { + font-size: 1rem; + width: 100%; +} + +.calendar-caption { + display: none; +} + +.item-description { + border: 1px solid var(--in-content-page-color); + margin: 2px 4px 0; + min-height: 10em; +} + +.summary-items { + list-style-image: var(--icon-check); + list-style-position: inside; + -moz-context-properties: stroke; + stroke: var(--color-green-60); + line-height: 1.8; +} + +.tabPane > section > .center-button, +.center-button { + margin-inline: auto; +} + +.center-button { + display: block; + margin-block: 1em; +} + +a.center-button { + max-width: max-content; +} + +.progressPane, +.center { + text-align: center; +} + +/* Conditionally visible elements */ +.restart-only, +.progressFinish, +.progressPane { + display: none; +} + +.restart-required .restart-only { + display: inherit; +} + +.progress .before-progress { + display: none; +} + +.progress .progressPane, +.complete .progressFinish { + display: inherit; +} + +.final-step .next-button, +.restart-required .no-restart { + display: none; +} + +.complete .progressFinish.center-button { + display: block; +} + +/* Icons */ +.icon { + object-fit: contain; + vertical-align: middle; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.icon.info { + color: var(--primary); +} + +.icon.warn { + color: var(--color-orange-40); +} + +.back { + background-image: var(--icon-nav-left); + background-repeat: no-repeat; + background-position: 0.5em center; + -moz-context-properties: stroke; + stroke: currentColor; + padding-inline-start: 1em; +} + +.back:dir(rtl) { + background-image: var(--icon-nav-right); + background-position-x: right 0.5em; +} + +#importFooter { + margin-block-start: 4em; + text-align: center; +} + +/* Navigation steps */ + +#stepNav { + display: flex; + flex-direction: row; + align-items: center; + list-style-type: none; + padding: 0; + margin: 0; + margin-block-end: 2em; + margin-inline: 1em; + --step-size: var(--in-content-button-height); +} + +#stepNav li { + flex-grow: 1; + font-size: 1.4rem; + display: flex; + align-items: center; +} + +#stepNav li:first-child { + flex-grow: 0; +} + +#stepNav button { + border-radius: var(--step-size); + height: var(--step-size); + width: var(--step-size); + min-width: var(--step-size); + padding: 0; + margin: 0; + opacity: 1; + box-sizing: border-box; + font-weight: 600; +} + +#stepNav li:not(:first-child)::before { + content: ""; + border-block-start: 2px dashed var(--in-content-button-background); + display: block; + margin-block-start: 1px; + flex-grow: 1; +} + +#stepNav li.current button { + border: 3px solid var(--primary); + background: var(--in-content-box-background); + color: var(--primary); +} + +#stepNav li.completed button { + background: var(--primary); + color: var(--in-content-box-background); +} + +#stepNav li.completed:not(:first-child)::before, +#stepNav li.current:not(:first-child)::before { + border-block-start: 2px solid var(--primary); +} + +#navConfirm button { + border-radius: var(--in-content-button-border-radius); + width: auto; + font-size: 1rem; + padding-inline: 0.5em; +} |