New UI for Bundles

src/Tools/Scripts/bundle_asset_builder/style.css

@@ -32,16 +32,53 @@ button:hover {
 }
 
 div.content {
-    margin: 10px auto;
     padding: 20px;
     border: 1px solid #00717c;
     background-color: #00090e;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    bottom: 80px;
+    left: 10px;
+    overflow-y: auto;
 }
 
 div.buttons {
     display: flex;
+	padding: 10px 20px;
     justify-content: space-between;
     align-items: center;
+    top: auto;
+    bottom: 10px;
+}
+
+.content::-webkit-scrollbar {
+    width: 8px;
+}
+.content::-webkit-scrollbar-track {
+    background: #none;
+}
+.content::-webkit-scrollbar-thumb {
+    background: #13AAF4;
+    border-radius: 10px;
+    border: 1px solid #46DDF0;
+}
+
+div.buttons button {
+    padding: 8px 40px 6px 40px;
+    font: normal 23px / 20px "Bebas Neue", "Trebuchet MS", Verdana, sans-serif;
+    color: white;
+    border: 1px solid #65E872;
+    border-radius: 4px;
+    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;
+}
+
+div.buttons 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%);
 }
 
 span.enhanced-keyword {
@@ -49,8 +86,46 @@ span.enhanced-keyword {
 }
 
 span.price {
-    color: #00aaff;
-    font-family: "Bebas Neue", "Trebuchet MS", Verdana, sans-serif;
-    font-weight: normal;
-    font-size: 32px;
+    color: #ffffff;
+    font: normal 32px / 32px "Bebas Neue", "Trebuchet MS", Verdana, sans-serif;
+    padding-right: 25px;
+    position: relative;
+    display: inline-block;
+    padding-top: 5px;
+}
+.price::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 42px;
+    height: 100%;
+    background: #00090e;
+    z-index: 1;
+}
+
+.price::after {
+    content: 'G';
+    color: #00090e;
+    font: bold 18px / 1 Arial;
+    text-shadow: 1px 2px 1px #00B2FE;
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: linear-gradient(
+        -35deg,  
+        #007FFF 45%,
+        #03C2F7 54%,
+        #00B2FE 70%, 
+        #007FFF 100%
+    );
+    border: 1px solid #00B2FE;
+    border-radius: 50%;
+    
+    z-index: 2;
 }