Created
December 19, 2016 18:38
-
-
Save rolandkofler/f55cae521011f1b341b9e578eed974e9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html><head> | |
<meta charset="utf-8"> | |
<title>MetaMask Notification</title> | |
<style> | |
body { | |
overflow: hidden; | |
} | |
</style> | |
<style type="text/css">/*========== fonts.css ==========*/ | |
@import url(https://fonts.googleapis.com/css?family=Roboto:300,500); | |
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css); | |
@font-face { | |
font-family: 'Montserrat Regular'; | |
src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff'); | |
src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'); | |
font-weight: normal; | |
font-style: normal; | |
font-size: 'small'; | |
} | |
@font-face { | |
font-family: 'Montserrat Bold'; | |
src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff'); | |
src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Montserrat Light'; | |
src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff'); | |
src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: 'Montserrat UltraLight'; | |
src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff'); | |
src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
/*========== reset.css ==========*/ | |
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
/*========== lib.css ==========*/ | |
/* color */ | |
.color-orange { | |
color: #F7861C; | |
} | |
.color-forest { | |
color: #0A5448; | |
} | |
/* lib */ | |
.full-width { | |
width: 100%; | |
} | |
.full-height { | |
height: 100%; | |
} | |
.flex-column { | |
display: flex; | |
flex-direction: column; | |
} | |
.flex-column-bottom { | |
display: flex; | |
flex-direction: column-reverse; | |
} | |
.flex-row { | |
display: flex; | |
flex-direction: row; | |
} | |
.flex-space-between { | |
justify-content: space-between; | |
} | |
.flex-space-around { | |
justify-content: space-around; | |
} | |
.flex-right { | |
display: flex; | |
flex-direction: row; | |
justify-content: flex-end; | |
} | |
.flex-left { | |
display: flex; | |
flex-direction: row; | |
justify-content: flex-start; | |
} | |
.flex-fixed { | |
flex: none; | |
} | |
.flex-basis-auto { | |
flex-basis: auto; | |
} | |
.flex-grow { | |
flex: 1 1 auto; | |
} | |
.flex-wrap { | |
flex-wrap: wrap; | |
} | |
.flex-center { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.flex-justify-center { | |
justify-content: center; | |
} | |
.flex-align-center { | |
align-items: center; | |
} | |
.flex-self-end { | |
align-self: flex-end; | |
} | |
.flex-self-stretch { | |
align-self: stretch; | |
} | |
.flex-vertical { | |
flex-direction: column; | |
} | |
.z-bump { | |
z-index: 1; | |
} | |
.select-none { | |
cursor: inherit; | |
-moz-user-select: none; | |
-webkit-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
.pointer { | |
cursor: pointer; | |
} | |
.cursor-pointer { | |
cursor: pointer; | |
transform-origin: center center; | |
transition: transform 50ms ease-in-out; | |
} | |
.cursor-pointer:hover { | |
transform: scale(1.1); | |
} | |
.cursor-pointer:active { | |
transform: scale(0.95); | |
} | |
.cursor-disabled { | |
cursor: not-allowed; | |
} | |
.margin-bottom-sml { | |
margin-bottom: 20px; | |
} | |
.margin-bottom-med { | |
margin-bottom: 40px; | |
} | |
.margin-right-left { | |
margin: 0 20px; | |
} | |
.bold { | |
font-weight: bold; | |
} | |
.text-transform-uppercase { | |
text-transform: uppercase; | |
} | |
.font-small { | |
font-size: 12px; | |
} | |
.font-medium { | |
font-size: 1.2em; | |
} | |
hr.horizontal-line { | |
display: block; | |
height: 1px; | |
border: 0; | |
border-top: 1px solid #ccc; | |
margin: 1em 0; | |
padding: 0; | |
} | |
.hover-white:hover { | |
background: white; | |
} | |
.red-dot { | |
background: #E91550; | |
color: white; | |
border-radius: 10px; | |
} | |
.diamond { | |
transform: rotate(45deg); | |
background: #038789; | |
} | |
.hollow-diamond { | |
transform: rotate(45deg); | |
border: 1px solid #038789; | |
} | |
.pending-dot { | |
background: red; | |
left: 14px; | |
top: 14px; | |
color: white; | |
border-radius: 10px; | |
height: 20px; | |
min-width: 20px; | |
position: relative; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
padding: 4px; | |
} | |
.ether-balance { | |
display: flex; | |
align-items: center; | |
} | |
.menu-icon { | |
display: inline-block; | |
height: 9px; | |
min-width: 9px; | |
margin: 13px; | |
} | |
.ether-icon { | |
background: rgb(0, 163, 68); | |
border-radius: 20px; | |
} | |
.testnet-icon { | |
background: #2465E1; | |
} | |
.drop-menu-item { | |
display: flex; | |
align-items: center; | |
} | |
.invisible { | |
visibility: hidden; | |
} | |
.one-line-concat { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
/*========== index.css ==========*/ | |
/* | |
faint orange (textfield shades) #FAF6F0 | |
light orange (button shades): #F5C26D | |
dark orange (text): #F5A623 | |
borders/font/any gray: #4A4A4A | |
*/ | |
/* | |
application specific styles | |
*/ | |
* { | |
box-sizing: border-box; | |
} | |
html, body { | |
font-family: 'Montserrat Regular', Arial; | |
color: #4D4D4D; | |
font-weight: 300; | |
line-height: 1.4em; | |
background: #F7F7F7; | |
} | |
input:focus, textarea:focus { | |
outline: none; | |
} | |
#app-content { | |
overflow-x: hidden; | |
min-width: 357px; | |
width: 360px; | |
height: 500px; | |
} | |
button { | |
font-family: 'Montserrat Bold'; | |
outline: none; | |
cursor: pointer; | |
padding: 8px 12px; | |
border: none; | |
color: white; | |
transform-origin: center center; | |
transition: transform 50ms ease-in; | |
/* default orange */ | |
background: rgba(247, 134, 28, 1); | |
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); | |
} | |
button.btn-green { | |
background: rgba(106, 195, 96, 1); | |
box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); | |
} | |
button.btn-red { | |
background: rgba(254, 35, 17, 1); | |
box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); | |
} | |
button[disabled] { | |
cursor: not-allowed; | |
background: rgba(197, 197, 197, 1); | |
box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); | |
} | |
button.spaced { | |
margin: 2px; | |
} | |
button:not([disabled]):hover { | |
transform: scale(1.1); | |
} | |
button:not([disabled]):active { | |
transform: scale(0.95); | |
} | |
a { | |
text-decoration: none; | |
color: inherit; | |
} | |
a:hover{ | |
color: #df6b0e; | |
} | |
/* | |
app | |
*/ | |
.active { | |
color: #909090; | |
} | |
button.primary { | |
padding: 8px 12px; | |
background: #F7861C; | |
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); | |
color: white; | |
font-size: 1.1em; | |
font-family: 'Montserrat Regular'; | |
text-transform: uppercase; | |
} | |
button.btn-thin { | |
border: 1px solid; | |
border-color: #4D4D4D; | |
color: #4D4D4D; | |
background: rgb(255, 174, 41); | |
border-radius: 4px; | |
min-width: 200px; | |
margin: 12px 0; | |
padding: 6px; | |
font-size: 13px; | |
} | |
.app-header { | |
padding: 6px 8px; | |
} | |
.app-header h1 { | |
font-family: 'Montserrat Regular'; | |
text-transform: uppercase; | |
color: #AEAEAE; | |
} | |
h2.page-subtitle { | |
font-family: 'Montserrat Regular'; | |
text-transform: uppercase; | |
color: #AEAEAE; | |
font-size: 1em; | |
margin: 12px; | |
} | |
.app-primary { | |
} | |
.app-footer { | |
padding-bottom: 10px; | |
align-items: center; | |
} | |
.identicon { | |
height: 46px; | |
width: 46px; | |
background-size: cover; | |
border-radius: 100%; | |
border: 3px solid gray; | |
} | |
textarea.twelve-word-phrase { | |
margin-top: 20px; | |
padding: 12px; | |
width: 300px; | |
height: 140px; | |
font-size: 16px; | |
background: white; | |
resize: none; | |
} | |
.network-indicator { | |
display: flex; | |
align-items: center; | |
font-size: 0.6em; | |
} | |
.network-name { | |
position: absolute; | |
top: 8px; | |
left: 60px; | |
width: 5.2em; | |
line-height: 9px; | |
text-rendering: geometricPrecision; | |
} | |
.check { | |
margin-left: 7px; | |
color: #F7861C; | |
flex: 1 0 auto; | |
display: flex; | |
justify-content: flex-end; | |
} | |
/* | |
app sections | |
*/ | |
/* initialize */ | |
.initialize-screen hr { | |
width: 60px; | |
margin: 12px; | |
border-color: #F7861C; | |
border-style: solid; | |
} | |
.initialize-screen label { | |
margin-top: 20px; | |
} | |
.initialize-screen button.create-vault { | |
margin-top: 40px; | |
} | |
.initialize-screen .warning { | |
font-size: 14px; | |
margin: 0 16px; | |
} | |
/* unlock */ | |
.error { | |
color: #E20202; | |
} | |
.warning { | |
color: #FFAE00; | |
} | |
.lock { | |
width: 50px; | |
height: 50px; | |
} | |
.lock.locked { | |
transform: scale(1.5); | |
opacity: 0.0; | |
transition: opacity 400ms ease-in, transform 400ms ease-in; | |
} | |
.lock.unlocked { | |
transform: scale(1); | |
opacity: 1; | |
transition: opacity 500ms ease-out, transform 500ms ease-out, background 200ms ease-in; | |
} | |
.lock.locked .lock-top { | |
transform: scaleX(1) translateX(0); | |
transition: transform 250ms ease-in; | |
} | |
.lock.unlocked .lock-top { | |
transform: scaleX(-1) translateX(-12px); | |
transition: transform 250ms ease-in; | |
} | |
.lock.unlocked:hover { | |
border-radius: 4px; | |
background: #e5e5e5; | |
border: 1px solid #b1b1b1; | |
} | |
.lock.unlocked:active { | |
background: #c3c3c3; | |
} | |
.section-title .fa-arrow-left { | |
margin: -2px 8px 0px -8px; | |
} | |
.unlock-screen #metamask-mascot-container { | |
margin-top: 24px; | |
} | |
.unlock-screen h1 { | |
margin-top: -28px; | |
margin-bottom: 42px; | |
} | |
.unlock-screen input[type=password] { | |
width: 260px; | |
/*height: 36px; | |
margin-bottom: 24px; | |
padding: 8px;*/ | |
} | |
.sizing-input{ | |
font-size: 1em; | |
height: 30px; | |
} | |
.editable-label{ | |
display: flex; | |
} | |
/* Webkit */ | |
.unlock-screen input::-webkit-input-placeholder { | |
text-align: center; | |
font-size: 1.2em; | |
} | |
/* Firefox 18- */ | |
.unlock-screen input:-moz-placeholder { | |
text-align: center; | |
font-size: 1.2em; | |
} | |
/* Firefox 19+ */ | |
.unlock-screen input::-moz-placeholder { | |
text-align: center; | |
font-size: 1.2em; | |
} | |
/* IE */ | |
.unlock-screen input:-ms-input-placeholder { | |
text-align: center; | |
font-size: 1.2em; | |
} | |
input.large-input, textarea.large-input { | |
/*margin-bottom: 24px;*/ | |
padding: 8px; | |
} | |
input.large-input { | |
height: 36px; | |
} | |
.letter-spacey { | |
letter-spacing: 0.1em; | |
} | |
/* accounts */ | |
.accounts-section { | |
margin: 0 0px; | |
} | |
.accounts-section .horizontal-line { | |
margin: 0px 18px; | |
} | |
.accounts-list-option { | |
height: 120px; | |
} | |
.accounts-list-option .identicon-wrapper { | |
width: 100px; | |
} | |
.unconftx-link { | |
margin-top: 24px; | |
cursor: pointer; | |
} | |
.unconftx-link .fa-arrow-right { | |
margin: 0px -8px 0px 8px; | |
} | |
/* identity panel */ | |
.identity-panel { | |
font-weight: 500; | |
} | |
.identity-panel .identicon-wrapper { | |
margin: 4px; | |
margin-top: 8px; | |
display: flex; | |
align-items: center; | |
} | |
.identity-panel .identicon-wrapper span { | |
margin: 0 auto; | |
} | |
.identity-panel .identity-data { | |
margin: 8px 8px 8px 18px; | |
} | |
.identity-panel i { | |
margin-top: 32px; | |
margin-right: 6px; | |
color: #B9B9B9; | |
} | |
.identity-panel .arrow-right { | |
padding-left: 18px; | |
width: 42px; | |
min-width: 18px; | |
height: 100%; | |
} | |
.identity-copy.flex-column { | |
flex: 0.25 0 auto; | |
justify-content: center; | |
} | |
/* accounts screen */ | |
.identity-section { | |
} | |
.identity-section .identity-panel { | |
background: #E9E9E9; | |
border-bottom: 1px solid #B1B1B1; | |
cursor: pointer; | |
} | |
.identity-section .identity-panel.selected { | |
background: white; | |
color: #F3C83E; | |
} | |
.identity-section .identity-panel.selected .identicon { | |
border-color: orange; | |
} | |
.identity-section .accounts-list-option:hover, | |
.identity-section .accounts-list-option.selected { | |
background:white; | |
} | |
/* account detail screen */ | |
.account-detail-section { | |
} | |
.name-label{ | |
} | |
.edit-text { | |
height: 100%; | |
visibility: hidden; | |
} | |
.editing-label { | |
display: flex; | |
justify-content: flex-start; | |
margin-left: 50px; | |
margin-bottom: 2px; | |
font-size: 11px; | |
text-rendering: geometricPrecision; | |
color: #F7861C; | |
} | |
.name-label:hover .edit-text { | |
visibility: visible; | |
} | |
/* tx confirm */ | |
.unconftx-section input[type=password] { | |
height: 22px; | |
padding: 2px; | |
margin: 12px; | |
margin-bottom: 24px; | |
border-radius: 4px; | |
border: 2px solid #F3C83E; | |
background: #FAF6F0; | |
} | |
/* Send Screen */ | |
.send-screen { | |
} | |
.send-screen section { | |
margin: 8px 16px; | |
} | |
.send-screen input { | |
width: 100%; | |
font-size: 12px; | |
} | |
/* Ether Balance Widget */ | |
.ether-balance-amount { | |
color: #F7861C; | |
} | |
.ether-balance-label { | |
color: #ABA9AA; | |
} | |
/* Info screen */ | |
.info-gray{ | |
font-family: 'Montserrat Regular'; | |
text-transform: uppercase; | |
color: #AEAEAE; | |
} | |
.icon-size{ | |
width: 20px; | |
} | |
.info{ | |
font-family: 'Montserrat Regular', Arial; | |
padding-bottom: 10px; | |
display: inline-block; | |
padding-left: 5px; | |
} | |
/* buy eth warning screen */ | |
.eth-warning{ | |
transition: opacity 400ms ease-in, transform 400ms ease-in; | |
} | |
.buy-subview{ | |
transition: opacity 400ms ease-in, transform 400ms ease-in; | |
} | |
.input-container:hover .edit-text{ | |
visibility: visible; | |
} | |
.buy-inputs{ | |
font-family: 'Montserrat Light'; | |
font-size: 13px; | |
height: 20px; | |
background: transparent; | |
box-sizing: border-box; | |
border: solid; | |
border-color: transparent; | |
border-width: 0.5px; | |
border-radius: 2px; | |
} | |
.input-container:hover .buy-inputs{ | |
box-sizing: inherit; | |
border: solid; | |
border-color: #F7861C; | |
border-width: 0.5px; | |
border-radius: 2px; | |
} | |
.buy-inputs:focus{ | |
border: solid; | |
border-color: #F7861C; | |
border-width: 0.5px; | |
border-radius: 2px; | |
} | |
.activeForm { | |
background: #F7F7F7; | |
border: none; | |
border-radius: 8px 8px 0px 0px; | |
width: 50%; | |
text-align: center; | |
padding-bottom: 4px; | |
} | |
.inactiveForm { | |
border: none; | |
border-radius: 8px 8px 0px 0px; | |
width: 50%; | |
text-align: center; | |
padding-bottom: 4px; | |
} | |
.ex-coins { | |
font-family: 'Montserrat Regular'; | |
text-transform: uppercase; | |
text-align: center; | |
font-size: 33px; | |
width: 118px; | |
height: 42px; | |
padding: 1px; | |
color: #4D4D4D; | |
} | |
.marketinfo{ | |
font-family: 'Montserrat light'; | |
color: #AEAEAE; | |
font-size: 15px; | |
line-height: 17px; | |
} | |
#fromCoin::-webkit-calendar-picker-indicator { | |
display: none; | |
} | |
#coinList { | |
width: 400px; | |
height: 500px; | |
overflow: scroll; | |
} | |
.icon-control .fa-refresh{ | |
visibility: hidden; | |
} | |
.icon-control:hover .fa-refresh{ | |
visibility: visible; | |
} | |
.icon-control:hover .fa-chevron-right{ | |
visibility: hidden; | |
} | |
.inactive { | |
color: #AEAEAE; | |
} | |
.inactive button{ | |
background: #AEAEAE; | |
color: white; | |
} | |
.ellip-address { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
width: 5em; | |
font-size: 14px; | |
font-family: "Montserrat Light"; | |
margin-left: 5px; | |
} | |
.qr-header { | |
font-size: 25px; | |
margin-top: 40px; | |
} | |
.qr-message { | |
font-size: 12px; | |
color: #F7861C; | |
} | |
div.message-container > div:first-child { | |
margin-top: 18px; | |
font-size: 15px; | |
color: #4D4D4D; | |
} | |
.pop-hover:hover { | |
transform: scale(1.1); | |
} | |
/*========== transitions.css ==========*/ | |
/* universal */ | |
.app-primary .main-enter { | |
position: absolute; | |
width: 100%; | |
} | |
/* center position */ | |
.app-primary.from-right .main-enter-active, | |
.app-primary.from-left .main-enter-active { | |
overflow-x: hidden; | |
transform: translateX(0px); | |
transition: transform 300ms ease-in; | |
} | |
/* exited positions */ | |
.app-primary.from-left .main-leave-active { | |
transform: translateX(360px); | |
transition: transform 300ms ease-in; | |
} | |
.app-primary.from-right .main-leave-active { | |
transform: translateX(-360px); | |
transition: transform 300ms ease-in; | |
} | |
/* loader transitions */ | |
.loader-enter, .loader-leave-active { | |
opacity: 0.0; | |
transition: opacity 150 ease-in; | |
} | |
.loader-enter-active, .loader-leave { | |
opacity: 1.0; | |
transition: opacity 150 ease-in; | |
} | |
/* entering positions */ | |
.app-primary.from-right .main-enter:not(.main-enter-active) { | |
transform: translateX(360px); | |
} | |
.app-primary.from-left .main-enter:not(.main-enter-active) { | |
transform: translateX(-360px); | |
} | |
/*========== react-tooltip-component.css ==========*/ | |
.tooltip{position:absolute;z-index:1070;display:block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;line-break:auto;line-height:1.42857143;text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;word-wrap:normal;font-size:12px}.tooltip.top{margin-top:-3px;padding:5px 0}.tooltip.right{margin-left:3px;padding:0 5px}.tooltip.bottom{margin-top:3px;padding:5px 0}.tooltip.left{margin-left:-3px;padding:0 5px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px}.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow{bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{left:5px}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000} | |
</style></head> | |
<body> | |
<div id="app-content"><div data-reactroot="" class="flex-column flex-grow full-height" style="overflow: hidden; position: relative;"><span class="css-transition-group"></span><div class="menu-droppo-container" style="position: absolute; left: 0px; top: 36px; z-index: 1;"><style> | |
.menu-droppo-enter { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(-100%); | |
} | |
.menu-droppo-enter.menu-droppo-enter-active { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(0%); | |
} | |
.menu-droppo-leave { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(0%); | |
} | |
.menu-droppo-leave.menu-droppo-leave-active { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(-100%); | |
} | |
</style><span class="css-transition-group"></span></div><div class="menu-droppo-container" style="position: absolute; right: 0px; top: 36px; z-index: 1;"><style> | |
.menu-droppo-enter { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(-100%); | |
} | |
.menu-droppo-enter.menu-droppo-enter-active { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(0%); | |
} | |
.menu-droppo-leave { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(0%); | |
} | |
.menu-droppo-leave.menu-droppo-leave-active { | |
transition: transform 300ms ease-in-out; | |
transform: translateY(-100%); | |
} | |
</style><span class="css-transition-group"></span></div><div class="app-primary flex-grow from-right" style="height: 380px; width: 360px;"><span class="css-transition-group"><div class="flex-column flex-grow"><div class="section-title flex-row flex-center"><h2 class="page-subtitle">Confirm Transaction</h2></div><h3 style="align-self: center; display: none;"><i class="fa fa-arrow-left fa-lg cursor-pointer" style="display: none;"></i><!-- react-text: 16 --> 1 of 1 <!-- /react-text --><i class="fa fa-arrow-right fa-lg cursor-pointer" style="display: none;"></i></h3><span class="css-transition-group"><div><div><div class="flex-row flex-center" style="max-width: 100%;"><div class="identity-panel flex-row flex-left"><div class="identicon-wrapper flex-column select-none" style="order: 3;"><div style="display: inline-block; height: 46px; width: 46px; border-radius: 23px; overflow: hidden;"><img src="data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%22100%22%20version%3D%221.1%22%20width%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20style%3D%22overflow%3A%20hidden%3B%20position%3A%20relative%3B%22%3E%3Cdesc%20style%3D%22-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200)%3B%22%3ECreated%20with%20Rapha%C3%ABl%202.2.0%3C%2Fdesc%3E%3Cdefs%20style%3D%22-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200)%3B%22%3E%3C%2Fdefs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2246%22%20height%3D%2246%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%23f5b400%22%20stroke%3D%22none%22%20style%3D%22-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200)%3B%22%3E%3C%2Frect%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2246%22%20height%3D%2246%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%2318a9f2%22%20stroke%3D%22none%22%20transform%3D%22matrix(0.548%2C0.8365%2C-0.8365%2C0.548%2C30.0574%2C-17.752)%22%20style%3D%22-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200)%3B%22%3E%3C%2Frect%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2246%22%20height%3D%2246%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%23f28e02%22%20stroke%3D%22none%22%20transform%3D%22matrix(-0.4773%2C-0.8787%2C0.8787%2C-0.4773%2C26.2388%2C79.3628)%22%20style%3D%22-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200)%3B%22%3E%3C%2Frect%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2246%22%20height%3D%2246%22%20rx%3D%220%22%20ry%3D%220%22%20fill%3D%22%23f92f01%22%20stroke%3D%22none%22%20transform%3D%22matrix(-0.9726%2C-0.2324%2C0.2324%2C-0.9726%2C3.1159%2C69.8282)%22%20style%3D%22-webkit-tap-highlight-color%3A%20rgba(0%2C%200%2C%200%2C%200)%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E"></div></div><div class="flex-column flex-justify-center" style="line-height: 15px; order: 2; display: flex; align-items: flex-end;"><span class="font-small" style="font-family: "Montserrat Bold", Montserrat, sans-serif;">Account 1</span><span class="font-small" style="font-family: "Montserrat Light", Montserrat, sans-serif;">9b2319...24C2</span><span class="font-small" style="font-family: "Montserrat Light", Montserrat, sans-serif;"><div class="ether-balance ether-balance-amount"><div style="display: inline;"><div class="flex-column"><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right;">1.000</div><div style="color: rgb(174, 174, 174); font-size: 12px; margin-left: 5px;">ETH</div></div><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right; font-size: 12px; color: rgb(51, 51, 51);">7.71</div><div style="color: rgb(174, 174, 174); margin-left: 5px; font-size: 12px;">USD</div></div></div></div></div></span></div></div><img src="images/forward-carrat.svg" style="padding: 5px 6px 0px 10px; height: 37px;"><div class="identity-panel flex-row flex-left"><div class="identicon-wrapper flex-column select-none" style="order: 1;"><i class="fa fa-file-text-o fa-lg" style="font-size: 42px; transform: translate(0px, -16px);"></i></div><div class="flex-column flex-justify-center" style="line-height: 15px; order: 2; display: flex;"><span class="font-small" style="font-family: "Montserrat Bold", Montserrat, sans-serif;">New Contract</span></div></div></div><style> | |
.table-box { | |
margin: 7px 0px 0px 0px; | |
width: 100%; | |
} | |
.table-box .row { | |
margin: 0px; | |
background: rgb(236,236,236); | |
display: flex; | |
justify-content: space-between; | |
font-family: Montserrat Light, sans-serif; | |
font-size: 13px; | |
padding: 5px 25px; | |
} | |
.table-box .row .value { | |
font-family: Montserrat Regular; | |
} | |
</style><div class="table-box"><div class="row"><div class="cell label">Amount</div><div class="ether-balance ether-balance-amount"><div style="display: inline;"><div class="flex-column"><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right;">0</div><div style="color: rgb(174, 174, 174); font-size: 12px; margin-left: 5px;">ETH</div></div><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right; font-size: 12px; color: rgb(51, 51, 51);">0.00</div><div style="color: rgb(174, 174, 174); margin-left: 5px; font-size: 12px;">USD</div></div></div></div></div></div><div class="cell row"><div class="cell label">Max Transaction Fee</div><div class="ether-balance ether-balance-amount"><div style="display: inline;"><div class="flex-column"><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right;">0.012066</div><div style="color: rgb(174, 174, 174); font-size: 12px; margin-left: 5px;">ETH</div></div><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right; font-size: 12px; color: rgb(51, 51, 51);">0.09</div><div style="color: rgb(174, 174, 174); margin-left: 5px; font-size: 12px;">USD</div></div></div></div></div></div><div class="cell row" style="font-family: "Montserrat Regular"; background: white; padding: 10px 25px;"><div class="cell label">Max Total</div><div class="cell value" style="display: flex; align-items: center;"><div class="ether-balance ether-balance-amount"><div style="display: inline;"><div class="flex-column"><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right;">0.012066</div><div style="color: rgb(174, 174, 174); font-size: 12px; margin-left: 5px;">ETH</div></div><div class="flex-row" style="align-items: flex-end; line-height: 13px; font-family: "Montserrat Light"; text-rendering: geometricPrecision;"><div style="width: 100%; text-align: right; font-size: 12px; color: rgb(51, 51, 51);">0.09</div><div style="color: rgb(174, 174, 174); margin-left: 5px; font-size: 12px;">USD</div></div></div></div></div></div></div><div class="cell row" style="background: rgb(247, 247, 247); padding-bottom: 0px;"><div class="cell label"></div><div class="cell value" style="font-family: "Montserrat Light"; font-size: 11px;">Data included: 2118 bytes</div></div></div></div><style> | |
.conf-buttons button { | |
margin-left: 10px; | |
text-transform: uppercase; | |
} | |
</style><div class="error" style="margin-left: 50px; font-size: 0.9em;">Transaction Error. Exception thrown in contract code.</div><div class="flex-row flex-space-around conf-buttons" style="display: flex; justify-content: flex-end; margin: 14px 25px;"><button class="confirm">Accept</button><button class="cancel btn-red">Reject</button></div></div></span></div></span></div></div></div> | |
<script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script> | |
<div class="tooltip bottom" style="transition: opacity 0.4s; left: -500px; top: -500px; opacity: 0;"><div class="tooltip-arrow"></div><div class="tooltip-inner">1.000000 ETH</div></div><div class="tooltip bottom" style="transition: opacity 0.4s; left: -500px; top: -500px; opacity: 0;"><div class="tooltip-arrow"></div><div class="tooltip-inner">0.000000 ETH</div></div><div class="tooltip bottom" style="transition: opacity 0.4s; left: -500px; top: -500px; opacity: 0;"><div class="tooltip-arrow"></div><div class="tooltip-inner">0.012066 ETH</div></div><div class="tooltip bottom" style="transition: opacity 0.4s; left: -500px; top: -500px; opacity: 0;"><div class="tooltip-arrow"></div><div class="tooltip-inner">0.012066 ETH</div></div></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment