diff --git a/src/MHServerEmu.WebFrontend/Data/Web/MTXStore/add-g.html b/src/MHServerEmu.WebFrontend/Data/Web/MTXStore/add-g.html
index 76113824..c0be4f28 100644
--- a/src/MHServerEmu.WebFrontend/Data/Web/MTXStore/add-g.html
+++ b/src/MHServerEmu.WebFrontend/Data/Web/MTXStore/add-g.html
@@ -15,8 +15,9 @@
font: 18px/1.385 Verdana;
}
- *:focus {
- outline-color: #00e8ff;
+ *:focus, *:active {
+ outline: none;
+ box-shadow: none;
}
h1, h2, h3, h4, h5, h6 {
@@ -26,43 +27,80 @@
}
button, input {
- width: 100%;
box-sizing: border-box;
border: 1px solid black;
- box-shadow: 0 0 1px 1px #00aaff;
background: #1c1c1c;
color: inherit;
font: inherit;
}
- button:not(.sign-button) {
- padding: 8px;
- }
-
- button:hover {
- box-shadow: 0 0 1px 1px white;
- }
-
input {
width: 100%;
text-align: center;
}
input[type="range"] {
+ -webkit-appearance: none;
+ appearance: none;
margin: 4px 0px;
+ background: transparent;
+ vertical-align: middle;
}
- input::-webkit-slider-thumb {
+ input[type="text"] {
+ box-sizing: border-box;
+ height: 30px;
+ border: 1px solid #505350;
+ border-radius: 4px;
+ background: linear-gradient(
+ #010501 0%,
+ #120F0E 10%,
+ #252525 100%
+ );
+ height: 30px;
+ width: 70px;
+ color: white;
+ font-family: "Bebas Neue", "Trebuchet MS", Verdana, sans-serif;
+ font-size: 24px;
+ line-height: 24px;
+ vertical-align: middle;
+ }
+
+ input[type="range"]::-webkit-slider-runnable-track {
+ height: 8px;
+ background: black;
+ background-image: url('data:image/svg+xml;utf8,');
+ background-repeat: repeat;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
+ }
+
+ input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 26px;
- height: 26px;
- background: #00aaff;
+ height: 16px;
+ margin-top: -4px;
+ border: 1px solid #41DAE5;
+ border-radius: 4px;
+ background: linear-gradient(
+ -35deg,
+ #0082C3 45%,
+ #23A4E5 55%,
+ #1196D6 70%,
+ #0082C3 100%
+ );
+ box-shadow:
+ inset 0 0 8px rgba(255,255,255,0.6),
+ 0 0 8px rgba(65, 218, 229, 0.8);
}
table {
width: 100%;
margin: 12px 0px;
- border-spacing: 4px;
+ border-spacing: 16px;
+ border: 1px solid #383838;
+ border-radius: 6px;
+ box-shadow: inset 0 0 8px #383838;
}
div.content {
@@ -94,6 +132,76 @@
justify-content: center;
align-items: center;
}
+
+ button {
+ padding: 8px 40px 6px 40px;
+ font: normal 23px / 20px "Bebas Neue", "Trebuchet MS", Verdana, sans-serif;
+ color: white;
+ border: 2px solid #1ac04c;
+ cursor: pointer;
+ border-radius: 5px;
+ text-shadow: 1px 1px 2px black;
+ text-transform: uppercase;
+ background: linear-gradient(337deg, #087A10 49%, #299F2C 51%, #0D7D16 70%, #087A10 100%);
+ box-shadow: inset 0 0 8px #39cb42, 0 0 4px #39cb42;
+ }
+
+ button:hover {
+ box-shadow: inset 0 0 8px #03ff0d, 0 0 4px #08cf10;
+ background: linear-gradient(337deg, #009E08 49%, #30DF39 51%, #24992b 70%, #009E08 100%);
+ }
+ button.sign-button, button.close-button{
+ border: 1px solid #4CF4F6;
+ background: linear-gradient(337deg, #0082C3 49%, #29A6E7 51%, #007CB8 70%, #0082C3 100%);
+ box-shadow: inset 0 0 8px #32B5F5, 0 0 4px #32B5F5;
+ }
+ button.sign-button{
+ font-size: 32px;
+ line-height: 16px;
+ vertical-align: middle;
+ width: 32px;
+ padding: 8px 8px 4px 8px;
+ background: linear-gradient(337deg, #0082C3 49%, #29A6E7 51%, #007CB8 70%, #0082C3 100%);
+ box-shadow: inset 0 0 8px #32B5F5;
+ }
+ button.sign-button:hover{
+ box-shadow: inset 0 0 8px #00f0ff;
+ background: linear-gradient(337deg, #299ED9 49%, #4DC5FF 51%, #2f98cd 70%, #299ED9 100%);
+ }
+ button.close-button:hover {
+ box-shadow: inset 0 0 8px #00f0ff, 0 0 4px #26BFFA;
+ background: linear-gradient(337deg, #299ED9 49%, #4DC5FF 51%, #2f98cd 70%, #299ED9 100%);
+ }
+ .center {
+ text-align: center;
+ width: 100%;
+ }
+ .g {
+ color: #00090e;
+ font: bold 18px / 1 Arial;
+ text-shadow: 1px 2px 1px #00B2FE;
+ display: inline-flex;
+ vertical-align: middle;
+ align-items: center;
+ justify-content: center;
+ width: 26px;
+ height: 26px;
+ background: linear-gradient(
+ -35deg,
+ #007FFF 45%,
+ #03C2F7 54%,
+ #00B2FE 70%,
+ #007FFF 100%
+ );
+ border: 1px solid #00B2FE;
+ border-radius: 50%;
+ margin-left: 8px;
+ }
+ .es {
+ display: inline-block;
+ vertical-align: middle;
+ width: 48px;
+ }
@@ -102,39 +210,77 @@
Select the amount of Eternity Splinters to convert to G.
Please note that the amount of G after conversion may be subject to rounding errors.
-
+
+
+