restructure

tools/panorama_decompile/decompiled_layout/frames/payment/payment.css

@@ -0,0 +1,287 @@
+.PaymentRoot{
+	width: 800px;
+	height: 500px;
+	background-color: #151515;
+	border-radius: 5px;
+	border: 1px solid #555;	
+}
+
+
+.line {
+	flow-children: right;
+}
+.center {
+	horizontal-align: center;
+}
+.margin-sm {
+	margin: 10px;
+}
+
+#PetInputPage,
+#InputPage,
+#HtmlPage {
+	horizontal-align: center;
+	vertical-align: middle;
+	transition-property: opacity, transform;
+	transition-duration: 0.3s;
+}
+
+#PetInputPage,
+#InputPage {
+	flow-children: down;
+}
+
+#PetInputPage .t1,
+#InputPage .t1 {
+	horizontal-align: center;
+	margin: 10px;
+}
+
+#PetInputPage .t2,
+#InputPage .t2 {
+	horizontal-align: center;
+	flow-children: right;
+}
+
+#PetTextPanel,
+#AvalonCoinPanel {
+	width: 120px;
+	background-color: #000;
+	vertical-align: middle;
+	border: 1px solid #FFED83;
+}
+
+#PetLevelText,
+#AvalonCoin{
+	width: fit-children;
+	background-color: none;
+	text-align: right;
+	text-overflow: clip;
+	horizontal-align: center;
+	border: 0;
+	transform: translateX(6px);
+	font-size: 25px;
+	min-width: 20px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+}
+
+#PetInputPage .title,
+#InputPage .title{
+	font-size: 30px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+	vertical-align: middle;
+}
+
+#PetPrePayButton,
+#PrePayButton{
+	horizontal-align: center;
+	margin: 30px;
+	flow-children: down;
+}
+
+#PetPrePayButton .title,
+#PrePayButton .title{
+	font-size: 20px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+	text-shadow: #000 0px 0px 4px 1.0;
+	margin-top: 15px;
+	margin-bottom: 15px;
+	horizontal-align: center;
+}
+
+#PetPrePayButton .pay-btn,
+#PrePayButton .pay-btn{
+	padding: 10px 15px;
+	flow-children: right;
+	border-radius: 5px;
+}
+
+#PetPrePayButton .pay-btn.alipay,
+#PrePayButton .pay-btn.alipay{
+	background-color: #108EE9;
+}
+
+#PetPrePayButton .pay-btn.wechatpay,
+#PrePayButton .pay-btn.wechatpay{
+	background-color: #3eb94e;
+	margin-left: 10px;
+}
+
+#PetPrePayButton .pay-btn Image,
+#PrePayButton .pay-btn Image{
+	width: 20px;
+	height: 20px;
+}
+
+#PetPrePayButton .pay-btn Label,
+#PrePayButton .pay-btn Label{
+	font-size: 20px;
+	color: #fff;
+	margin-left: 5px;
+}
+
+#PetPrePayButton .pay-btn.alipay:hover,
+#PrePayButton .pay-btn.alipay:hover{
+	box-shadow: #108EE9 0px 0px 4px;
+}
+
+#PetPrePayButton .pay-btn.wechatpay:hover,
+#PrePayButton .pay-btn.wechatpay:hover{
+	box-shadow: #3eb94e 0px 0px 4px;
+}
+
+#PetPrePayButton .pay-btn:active,
+#PrePayButton .pay-btn:active{
+	transform: scale3d(0.9,0.9,1);
+}
+
+#AddPetLevel,
+#AddAvalonCoin{
+	horizontal-align: center;
+	margin-top: 15px;
+	flow-children: right;
+}
+
+#AddPetLevel .btn,
+#AddAvalonCoin .btn{
+	background-color: #414141;
+	padding: 2px 4px;
+	border-radius: 5px;
+	margin: 0px 3px;
+}
+
+#AddPetLevel .btn Label,
+#AddAvalonCoin .btn Label{
+	margin-top: 3px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+}
+
+#AddPetLevel .btn:hover,
+#AddAvalonCoin .btn:hover{
+	brightness: 2;
+}
+
+#AddPetLevel .btn:active,
+#AddAvalonCoin .btn:active{
+	transform: scale3d(0.9,0.9,1);
+}
+
+/*=======================*/
+#HtmlPage {
+	flow-children: down;
+}
+
+#HtmlPage .btn{
+	background-color: #414141;
+	padding: 2px 4px;
+	border-radius: 5px;
+	margin: 0px 3px;
+	horizontal-align: center;
+}
+
+#HtmlPage .btn Label{
+	margin-top: 3px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+}
+
+#HtmlPage .btn:hover{
+	brightness: 2;
+}
+
+#HtmlPage .btn:active{
+	transform: scale3d(0.9,0.9,1);
+}
+
+
+#Html {
+	width: 700px;
+	height: 360px;
+	background-color: #000;
+}
+
+#GoBackButton {
+	padding: 5px 15px;
+	horizontal-align: center;
+	border-radius: 3px;
+	margin-top: 10px;
+	background-color: gradient(linear, 0% 100%, 0% 0%, from(#3F0600), to(#5B0900));
+}
+#GoBackButton:hover {
+	box-shadow: #A41C00 0px 0px 5px;
+}
+#GoBackButton Label {
+	color: #fff;
+}
+
+#CloseButton {
+	width: 30px;
+	height: 30px;
+	background-image: url("s2r://panorama/images/control_icons/x_close_png.vtex");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	wash-color: #eee2dd;
+	margin-top: 2px;
+	margin-right: 5px;
+	horizontal-align: right;
+	vertical-align: top;
+}
+
+#CloseButton:hover {
+	wash-color: #fac900;
+}
+
+#PageModeToggle {
+	horizontal-align: center;
+	vertical-align: top;
+	margin-top: 30px;
+}
+
+#PageModeToggle {
+	flow-children: right;
+}
+
+#PageModeToggle RadioButton {
+	margin-right: 10px;
+}
+
+#PageModeToggle RadioButton .TickBox {
+	background-color: #0000;
+	border: 2px solid #6c9fcb;
+	box-shadow: #abffff 0px 0px 0px;
+}
+
+#PageModeToggle RadioButton Label {
+	color: #EEE;
+}
+#PageModeToggle RadioButton:selected Label {
+	color: #fff;
+}
+
+#PageModeToggle RadioButton:selected .TickBox {
+	background-color: #abffff;
+	border: 2px solid #6c9fcb;
+	box-shadow: #abffff 0px 0px 6px;
+}
+
+
+#PayQrPanel {
+	width: 700px;
+	height: 360px;
+	background-color: #000;
+	horizontal-align: center;
+	vertical-align: middle;
+}
+
+#PayQrPanel Label {
+	color: #EEE;
+	font-size: 25px;
+	horizontal-align: center;
+	vertical-align: middle;
+}
+
+#PayQrImg {
+	width: 312px;
+	height: 312px;	
+	horizontal-align: center;
+	vertical-align: middle;
+}