1 <!DOCTYPE html> 2 <html i18n-values="dir:textdirection;"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"></meta> 5 <title i18n-content="title"></title> 6 <style> 7 html, body, ul, li { 8 margin: 0; 9 padding: 0; 10 } 11 12 body, html { 13 height: 100%; 14 } 15 16 a { 17 text-decoration: none; 18 color: #0066cc; 19 } 20 21 button { 22 min-width: 80px; 23 -webkit-margin-start: 15px; 24 } 25 26 h1 { 27 margin-top: 0; 28 font-size: 15pt; 29 } 30 31 h2 { 32 margin-top: 0; 33 font-size: 13pt; 34 } 35 36 header { 37 background-color: rgb(242, 247, 250); 38 border-bottom: 1px solid rgb(218, 236, 248); 39 padding: 50px; 40 -webkit-padding-start: 120px; 41 } 42 43 header p { 44 width: 800px; 45 margin-bottom: 0; 46 } 47 48 input { 49 margin-top: 7px; 50 margin-bottom: 7px; 51 } 52 53 li { 54 margin-bottom: 8px; 55 list-style: none; 56 } 57 58 p { 59 margin-top: 0; 60 } 61 62 progress { 63 width: 371px; 64 margin-bottom: 0; 65 } 66 67 ul { 68 webkit-margin-after: 25px; 69 webkit-margin-before: 0; 70 } 71 72 .aligned-to-start { 73 -webkit-padding-start: 120px; 74 } 75 76 .float-start { 77 float: left; 78 } 79 80 html[dir='rtl'] .float-start { 81 float-right; 82 } 83 84 .float-stop { 85 clear: both; 86 } 87 88 .default-text { 89 font-family: 'Noto Sans UI', 'Droid Sans Fallback', sans-serif; 90 margin-bottom: 0; 91 } 92 93 .normal-text { 94 font-size: 15; 95 } 96 97 .progress-text { 98 color: #666; 99 margin-bottom: 2px; 100 margin-top: 2px; 101 } 102 103 .select-option { 104 margin-top: 5px; 105 } 106 107 .new-line { 108 clear: both; 109 } 110 111 #main-content { 112 background-image: -webkit-linear-gradient(#FFFFFF, #EFF5FF); 113 padding: 35px; 114 -webkit-padding-start: 120px; 115 position: absolute; 116 left: 0; 117 right: 0; 118 bottom: 0; 119 top: 195px; 120 } 121 122 #status-icon { 123 position: absolute; 124 left: 32px; 125 right: 37px; 126 width: 64px; 127 height: 64px; 128 display: none; 129 } 130 131 #main-content.device-detected-none #status-icon { 132 background: url('insert.png'); 133 background-repeat: no-repeat; 134 display: block; 135 } 136 137 #main-content.device-detected-usb #status-icon { 138 background: url('detected_usb.png'); 139 background-repeat: no-repeat; 140 display: block; 141 } 142 143 #main-content.device-detected-sd #status-icon { 144 background: url('detected_sd.png'); 145 background-repeat: no-repeat; 146 display: block; 147 } 148 149 #progress-status-div { 150 display: none; 151 } 152 153 #main-content.progress #progress-status-div { 154 display: block; 155 } 156 157 #cancel-button { 158 display: none; 159 margin-top: -4px; 160 margin-bottom: 0; 161 } 162 163 #main-content.progress-canceble #cancel-button { 164 display: block; 165 } 166 167 #pending-time { 168 clear:both 169 } 170 171 #device-selection { 172 display: none; 173 } 174 175 #main-content.device-detected-mul #device-selection { 176 display: block; 177 } 178 179 #warning-icon{ 180 width:25px; 181 height:26px; 182 -webkit-margin-end: 10px; 183 display: none; 184 } 185 186 #main-content.warning #warning-icon, #main-content.error #warning-icon { 187 background:url('../../../../ui/webui/resources/images/icon_warning.png'); 188 background-repeat:no-repeat; 189 display: block; 190 } 191 192 #main-content.success #warning-icon { 193 background:url('../../../../ui/webui/resources/images/icon_checkmark.png'); 194 background-repeat:no-repeat; 195 display: block; 196 } 197 198 #warning-div { 199 display:block; 200 } 201 202 #main-content.progress #warning-div { 203 display: none; 204 } 205 206 #warning-text { 207 max-width: 550px; 208 padding-top: 4px; 209 } 210 211 #main-content.success #warning-button, 212 #main-content.warning-no-conf #warning-button, 213 #main-content.device-detected-none #warning-button { 214 display: none; 215 } 216 217 #main-content.error #warning-button { 218 clear: both; 219 } 220 </style> 221 <script src="chrome://resources/js/util.js"></script> 222 <script src="chrome://resources/js/local_strings.js"></script> 223 <script src="chrome://imageburner/strings.js"></script> 224 <script src="chrome://imageburner/image_burner.js"></script> 225 </head> 226 <body class="default-text"> 227 <header id="burn-header"> 228 <h1 i18n-content="headerTitle"></h1> 229 <p i18n-content="headerDescription"></p> 230 <a id="more-info-link" jsvalues="href:moreInfoLink" 231 i18n-content="headerLink"></a> 232 </header> 233 <div id="main-content"> 234 <div id="status-icon"></div> 235 <div id="status-info"> 236 <h2 id="status-text" class="status-text"></h2> 237 <div id="progress-status-div"> 238 <p id="progress-text" class="progress-text"></p> 239 <div id="progress-status" class="float-start"> 240 <progress id="progress-div" class="float-start"></progress> 241 <button id="cancel-button" class="float-start" 242 i18n-content="cancelButton"> 243 </button> 244 </div> 245 <p id="pending-time" class="progress-text"></p> 246 </div> 247 <ul id="device-selection"></ul> 248 <div id="warning-div"> 249 <div id="warning-icon" class="float-start"></div> 250 <p id="warning-text" class="float-start"></p> 251 <button id="warning-button" class="float-start"></button> 252 </div> 253 <div class="new-line"></div> 254 </div> 255 <div id="burn-footer"></div> 256 </div> 257 <script src="chrome://resources/js/i18n_template.js"></script> 258 <script src="chrome://resources/js/i18n_process.js"></script> 259 <script src="chrome://resources/js/jstemplate_compiled.js"></script> 260 </body> 261 </html> 262
