Visual rework

1 files changed, 52 insertions, 1 deletions

diff --git a/client/css/styles.css b/client/css/styles.css
index 2d05d0e..5dce3f4 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -1,3 +1,8 @@
+* {
+  padding: 0px;
+  margin: 0;
+}
+
 body {
   background: black;
   color: lightgreen;
@@ -28,6 +33,7 @@ div {
 .div-groups-row {
     display: flex;
     flex-direction: row;
+    align-items: center;
 }
 
 progress {
@@ -46,8 +52,15 @@ button {
   background:black;
   color:red;
   border: solid 2px;
+  width: 100%;
 }
 
+.no-break {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    word-break: none;
+}
 
 button {
   background:black;
@@ -83,11 +96,49 @@ summary:hover {
     color: black;
 }
 
+.start-top {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: flex-start;
+}
+
+.previously-played {
+    flex-direction: column-reverse;
+    overflow-y: auto;
+    height: 40vh;
+    gap: 5px;
+}
+
+.div-row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.previously-played img {
+    width: 48px;
+}
+.previously-played div {
+    border-color: purple;
+    border-style: solid;
+    border-width: 1px;
+}
+
+.div-inline-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+}
 .div-inline {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    align-items: baseline;
+    align-items: center;
     justify-content: space-evenly;
 }