Feat: Multiplayer sessions added using CRUD database.

static/css/layouts/table-main.css

@@ -0,0 +1,153 @@
+
+#formFilters {
+    padding: 0.5vh 1vw;
+    margin-top: 1vh;
+}
+
+table.table-main {
+    overflow-x: auto;
+    padding: 1vh 1vw;
+    max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
+    width: min-content;
+    align-items: normal;
+    justify-content: normal;
+}
+
+table.table-main * {
+    padding: 0.25vh 0.5vh;
+}
+
+table.table-main thead {
+    max-height: 4vh;
+    overflow-y: visible;
+    background-color: var(--colour-text-background);
+}
+
+table.table-main tbody {
+    max-height: 75vh;
+    overflow-y: auto;
+    min-width: fit-content;
+    max-width: fit-content;
+    overflow-x: visible;
+}
+table.table-main tbody.is_collapsed {
+    display: block;
+}
+table.table-main:has(tbody > div) tbody {
+}
+table.table-main tbody > div {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    justify-self: center;
+    align-content: center;
+    align-items: center;
+    align-self: center;
+    position: relative;
+    display: block;
+    width: 100%; /* min(calc(90vh), calc(70vw)); */
+}
+
+table.table-main select, 
+table.table-main input:not([type="checkbox"]), 
+table.table-main textarea, 
+table.table-main div {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    border: 1px solid var(--colour-accent);
+    border-radius: 0.5vh;
+    text-align: center;
+    background-color: var(--colour-text-background);
+    font-size: 16px;
+}
+
+table.table-main thead tr th, 
+table.table-main tbody tr td {
+    max-width: 20vh;
+    min-width: 20vh;
+    padding: 0 0.5vh;
+}
+table.table-main tbody tr td {
+    height: 3vh;
+    /* padding-top: 0.5vh; */
+}
+table.table-main thead tr th.notes, 
+table.table-main tbody tr td.notes {
+    max-width: fit-content;
+}
+table.table-main tbody tr td:has(.dirty) {
+    background-color: var(--colour-primary);
+}
+table.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
+    background-color: var(--colour-text-background);
+}
+table.table-main tbody tr:not(:last-of-type) td {
+    padding-bottom: 0.25vh;
+}
+table.table-main tbody tr td.ddl-preview div {
+    cursor: pointer;
+}
+table.table-main tbody tr td.ddl-preview div,
+table.table-main tbody tr td.ddl-preview select {
+    padding-left: 2vh;
+    padding-right: 2vh;
+}
+table.table-main thead tr th.active, 
+table.table-main tbody tr td.active {
+    max-width: 6vh;
+    min-width: 6vh;
+}
+table.table-main thead tr th.active svg.active.add {
+    fill: var(--colour-primary);
+    background-color: var(--colour-accent);
+    border: 2px solid var(--colour-accent);
+    padding: 0;
+    border-radius: 1vh;
+}
+table.table-main tbody tr td.active svg.active.add {
+    fill: var(--colour-primary);
+}
+table.table-main tbody tr td.active svg.active.delete {
+    fill: var(--colour-error);
+}
+table.table-main tbody tr td.display_order, 
+table.table-main thead tr th.display_order {
+    max-width: 5vh;
+    min-width: 5vh;
+}
+
+#container-template-elements {
+    display: none;
+}
+
+
+@media screen and (max-width: 850px) {
+}
+@media screen and (max-width: 400px) {
+    #formFilters input[type="text"],
+    #formFilters select {
+        width: 15vh;
+        /* height: 3vh; */
+    }
+    .topnav .container.company-name {
+        margin: 0 auto;
+        min-width: 40vw;
+        max-width: 64vw;
+    }
+    .company-name {
+        font-size: 1.2rem;
+    }
+    table.table-main {
+        max-height: 61vh;
+    }
+    table.table-main thead {
+        font-size: 0.8rem;
+    }
+    table.table-main tbody {
+        max-height: 53vh;
+    }
+}