UI improvments

QuirkyRobots · Jan 24, 2024 · 92b4f3b · 92b4f3b
1 parent 7d46e92
commit 92b4f3b
Showing 1 changed file with 13 additions and 9 deletions.
diff --git a/css/main.css b/css/main.css
@@ -73,7 +73,7 @@ header {
 input#coin {
   width: 100%;
   padding: 0.3rem;
-  padding-left: 0.8rem;
+  padding-left: 0.5rem;
 
   border: none;
   font-size: 0.9rem;
@@ -107,6 +107,7 @@ button#getStats {
   width: 100%;
   border-radius: 0.2rem;
   overflow: hidden;
+  background: #252533;
 }
 .coin-select {
   max-height: 70dvh;
@@ -238,7 +239,7 @@ canvas {
   display: flex;
   flex-direction: column;
   gap: clamp(0.4rem, 1.5dvh, 1.2rem);
-  padding: clamp(1rem, 3dvw, 2rem);
+  padding: clamp(.8rem, 2dvw, 1.7rem);
   font-family: arial;
   color: #fff;
   font-size: 1.5rem;
@@ -250,7 +251,7 @@ canvas {
 }
 .pc-app-logo-area {
   pointer-events: none;
-  margin-bottom: clamp(0.5rem, 2.5dvh, 2.5rem);
+  margin-bottom: clamp(0.5rem, 1.5dvh, 2.5rem);
 }
 .pc-app-logo {
   display: flex;
@@ -283,25 +284,28 @@ canvas {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  font-size: 1rem;
+  font-size: 1.05rem;
   color: #857757;
   background: rgb(37 37 51 / 73%);
-  padding: 0.2rem 0.5rem;
+  padding: 0.1rem 0.3rem;
   width: max-content;
   border-radius: 0.2rem;
 }
 .coin-img {
   display: flex;
-  width: 1rem;
-  height: 1rem;
+  width: 1.2rem;
+  height: 100%;
   aspect-ratio: 1 / 1;
   align-self: center;
 }
 #coinThumbBoxNav {
+  align-self: flex-end;
   min-width: 25px;
   min-height: 25px;
-  margin-right: .5rem;
-  align-self: flex-end;
+  height: auto;
+  padding: 0.1rem 0.3rem;
+  padding-right: 0;
+  aspect-ratio: 1 / 1;
 }
 
 /* Theme-controls with transition */