Styleeees

public/assets/css/style.css

@@ -152,16 +152,125 @@ body {
     white-space: nowrap;
 }
 
-.box table thead td {
-    font-weight: bold;
-}
-
 .box table td:nth-child(2),
 .box table th:nth-child(2) {
     width: 58px;
     white-space: nowrap;
 }
 
+.box table thead td {
+    font-weight: bold;
+}
+
+#table tbody,
+#stats tbody,
+.box tbody {
+    scrollbar-gutter: stable overlay;
+}
+
+#table thead td {
+    font-weight: bold;
+    white-space: nowrap;
+}
+
+#table tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 500px;
+}
+
+#table thead,
+#table tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+#table td:first-child,
+#table th:first-child {
+    width: 58px;
+    white-space: nowrap;
+}
+
+#table thead td {
+    font-weight: bold;
+}
+
+#table td:nth-child(5),
+#table th:nth-child(5) {
+    width: 30px;
+    white-space: nowrap;
+}
+
+#table {
+    width: 800px;
+}
+
+#stats thead td {
+    font-weight: bold;
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    text-orientation: mixed;
+    white-space: nowrap;
+}
+
+#stats tbody {
+    display: block;
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 500px;
+}
+
+#stats thead,
+#stats tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+}
+
+#stats td:first-child,
+#stats th:first-child {
+    width: 30px;
+    white-space: nowrap;
+}
+
+#stats thead td {
+    font-weight: bold;
+}
+
+#stats td:nth-child(2),
+#stats th:nth-child(2) {
+    width: 45px;
+    white-space: nowrap;
+}
+
+#stats td:nth-child(3),
+#stats th:nth-child(3) {
+    width: 20px;
+    white-space: nowrap;
+}
+
+#stats {
+    width: 800px;
+}
+
+.player-box {
+    border: 2px solid #AAAAAA;
+    background-color: white;
+    border-radius: 16px;
+    margin: 4px;
+    min-height: auto;
+    box-shadow: 5px 5px 5px #00000055;
+    display: block;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-justify: center;
+    text-align: left;
+    gap: 5px;
+    overflow: hidden;
+}
+
 .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -197,7 +306,7 @@ body {
 }
 
 hr {
-    min-width: 125%;
+    min-width: 110%;
     margin: auto 0;
 }
 
@@ -261,8 +370,6 @@ a {
     max-height: 20px;
     border-radius: 5px;
     color: var(--royal-blue);
-    padding-left: 5px;
-    padding-right: 5px;
     text-align: center;
     align-items: center;
     justify-content: center;
@@ -473,9 +580,9 @@ p {
 .mark {
     width: 32px;
     height: 24px;
-    border: 2px solid #606060;
+    border: 2px solid #FFFFFF;
     border-radius: 4px;
-    color: #888888;
+    color: #CCCCCC;
     font: 16px tahoma, sans-serif;
     font-weight: bold;
     text-align: center;
@@ -490,8 +597,8 @@ p {
 }
 
 .checkbox input:checked + .mark {
-    border: 2px solid #FFFFFF;
-    color: #CCCCCC;
+    border: 2px solid #606060;
+    color: #888888;
 }
 
 .days {