restore-from-backup.css (4271B)
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 https://mozilla.org/MPL/2.0/. */ 4 5 @import url("chrome://global/skin/in-content/common.css"); 6 7 #restore-from-backup-wrapper { 8 display: grid; 9 grid-template-areas: 10 "header" 11 "content" 12 "button-group"; 13 grid-template-rows: auto auto auto; 14 15 #restore-from-backup-header { 16 grid-area: header; 17 margin: 0; 18 } 19 20 & fieldset { 21 border: none; 22 margin: 0; 23 padding: 0; 24 } 25 26 #restore-from-backup-content { 27 display: flex; 28 flex-direction: column; 29 grid-area: content; 30 margin-block-start: var(--space-small); 31 margin-block-end: var(--space-large); 32 row-gap: var(--space-large); 33 } 34 35 #backup-restore-controls { 36 display: flex; 37 flex-direction: column; 38 row-gap: var(--space-xlarge); 39 } 40 41 #backup-filepicker-controls { 42 display: flex; 43 flex-direction: column; 44 row-gap: var(--space-xsmall); 45 46 #backup-filepicker { 47 display: flex; 48 column-gap: var(--space-small); 49 align-items: center; 50 } 51 52 #backup-filepicker-label { 53 text-align: start; 54 font-weight: var(--label-font-weight, normal); 55 } 56 57 #restore-from-backup-no-backup-file-link { 58 text-align: start; 59 } 60 61 #backup-filepicker-input { 62 flex: 1; 63 margin-block: var(--space-xsmall); 64 margin-inline-start: 0; 65 padding-inline-start: var(--space-xxlarge); 66 background-repeat: no-repeat; 67 background-size: var(--icon-size); 68 background-position: var(--space-small) 50%; 69 70 /* For the placeholder icon */ 71 fill: currentColor; 72 -moz-context-properties: fill; 73 74 &:dir(rtl) { 75 background-position: calc(100% - var(--space-small)) 50%; 76 } 77 78 &:is(textarea) { 79 background-position: var(--space-small) var(--space-small); 80 background-size: var(--icon-size); 81 resize: none; 82 overflow: hidden; 83 } 84 85 &:is(textarea):dir(rtl) { 86 background-position: calc(100% - var(--space-small)) var(--space-small); 87 } 88 } 89 90 #backup-filepicker-button { 91 margin-block: var(--space-xsmall); 92 } 93 94 #restore-from-backup-backup-found-info { 95 text-align: start; 96 color: var(--text-color-deemphasized); 97 font-size: var(--font-size-small); 98 margin-top: var(--space-xsmall); 99 } 100 } 101 102 #backup-password { 103 display: flex; 104 flex-direction: column; 105 106 & > #backup-password-label { 107 display: flex; 108 flex-direction: column; 109 text-align: start; 110 } 111 112 & > #backup-password-label > input { 113 margin-inline-start: 0; 114 margin-block: var(--space-xsmall); 115 font-weight: var(--label-font-weight, normal); 116 } 117 118 & > #backup-password-error { 119 text-align: start; 120 } 121 122 & > #backup-password-description { 123 color: var(--text-color-deemphasized); 124 font-size: var(--font-size-small); 125 text-align: start; 126 } 127 } 128 129 #restore-from-backup-button-group { 130 grid-area: button-group; 131 } 132 133 #backup-password-input[aria-invalid="true"] { 134 border-color: var(--outline-color-error); 135 } 136 137 /* Small, red helper text under the field */ 138 .field-error { 139 color: var(--text-color-error); 140 font-size: var(--font-size-small); 141 margin-block-start: var(--space-xsmall); 142 } 143 } 144 145 /* about:welcome embedded styles */ 146 :host([aboutwelcomeembedded]) { 147 #restore-from-backup-wrapper { 148 #restore-from-backup-button-group { 149 justify-content: flex-start; 150 } 151 152 #backup-filepicker-controls #backup-filepicker { 153 align-items: flex-end; 154 } 155 156 #password-entry-controls, 157 #backup-filepicker { 158 max-width: 400px; 159 } 160 161 #backup-filepicker-controls { 162 @media (800px < width <= 960px) { 163 #backup-filepicker { 164 flex-direction: column; 165 align-items: flex-start; 166 } 167 #backup-filepicker-input:is(textarea) { 168 flex: 1 1 auto; 169 } 170 } 171 } 172 173 .field-error { 174 text-align: start; 175 } 176 177 @media (width <= 800px) { 178 #restore-from-backup-button-group { 179 justify-content: center; 180 } 181 182 #restore-from-backup-confirm-button { 183 min-width: 240px; 184 } 185 } 186 } 187 }