Feat: Multiplayer sessions added using CRUD database.

static/css/components/button.css

@@ -0,0 +1,46 @@
+.button {
+    display: inline-block;
+    padding: 0.5vh 0.75vh;
+    border-radius: 0.75vh;
+    text-decoration: none;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    width: fit-content;
+}
+.button:not(.is_collapsed) {
+    cursor: pointer;
+}
+.button.is_collapsed {
+    display: block;
+    opacity: 0;
+}
+
+.button-primary {
+    background: var(--colour-accent);
+    color: var(--colour-primary);
+    border: 2px solid var(--colour-primary);
+}
+
+.button-primary:hover {
+    background: var(--colour-secondary);
+    color: var(--colour-accent);
+}
+
+.button-light {
+    background: white;
+    color: var(--colour-primary);
+}
+
+.button-light:hover {
+    background: var(--colour-accent);
+}
+
+.logo:hover{
+    cursor: pointer;
+}
+
+
+.button.icon.active.delete, 
+.button.icon.active.add {
+    height: 2vh;
+}

static/css/components/form.css

@@ -0,0 +1,6 @@
+
+
+select {
+    border: 1px solid var(--colour-accent);
+    background-color: var(--colour-page-background-1);
+}

static/css/components/image.css

@@ -0,0 +1,4 @@
+
+img, video {
+    border-radius: 3vh;
+}

static/css/components/label.css

@@ -0,0 +1,35 @@
+
+h1 {
+    font-size: 2.5rem;
+}
+h2 {
+    font-size: 1.8rem;
+}
+h3 {
+    font-size: 1.2rem;
+    margin-top: 1vh;
+}
+h4 {
+    font-size: 13px;
+    margin: 1vh;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+h5 {
+    font-size: 11px;
+    margin: 1vh;
+}
+
+
+.text-center {
+    text-align: center;
+}
+.section-title {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+}
+.section-subtitle {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+}

static/css/components/overlay.css

@@ -0,0 +1,155 @@
+
+
+/* Overlay modal */
+.overlay {
+    /*
+    display: none;
+    */
+    position: fixed;
+    width: 100px;
+    /* height: 50%; */ 
+    background: var(--colour-page-background);
+    justify-content: right;
+    align-items: right;
+    align-self: right;
+    z-index: 999;
+}
+.is_collapsed {
+    display: none;
+}
+
+/* Hamburger menu overlay */
+#buttonHamburger {
+    cursor: pointer;
+    position: fixed;
+    right: 1vh;
+    min-height: 3.5vh;
+    max-height: 3.5vh;
+    min-width: 4vh;
+    max-width: 4vh;
+    z-index: 10;
+    padding: 0;
+}
+#buttonHamburger.expanded {
+    min-width: 100px;
+    max-width: 100px;
+    min-height: 5vh;
+    max-height: 5vh;
+    padding-left: calc(100 * 1px - 5 * 1vh);
+    padding-bottom: 1vh;
+}
+#buttonHamburger .icon.hamburger {
+    min-height: 2.5vh;
+    max-height: 2.5vh;
+    min-width: 2.5vh;
+    max-width: 2.5vh;
+    padding: 0.5vh 0.75vh;
+}
+/*
+#buttonHamburger:hover {
+    text-decoration: none;
+    cursor: pointer;
+}
+*/
+#overlayHamburger {
+    top: 7vh;
+    right: 1vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 60vh;
+    background-color: var(--colour-accent);
+    border: 2px solid var(--border-colour);
+    border-radius: 0.75vh;
+    width: 100px;
+    z-index: 2;
+    padding-top: 3.5vh;
+}
+#overlayHamburger:first-child {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+#overlayHamburger:last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+#overlayHamburger > :hover {
+    color: var(--colour-page-background);
+    background-color: var(--colour-primary);
+}
+#overlayHamburger .container {
+    background-color: var(--colour-page-background);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    /* color: var(--colour-text); */
+    font-weight: bold;
+    font-size: 15px;
+    /* height: 18px; */
+    cursor: pointer;
+    padding: 0;
+    height: fit-content;
+}
+#overlayHamburger .container:hover {
+    color: var(--colour-page-background);
+    background-color: var(--colour-primary);
+}
+#overlayHamburger > .container {
+    /*
+    padding-top: 4.5px;
+    padding-bottom: 4.5px;
+    */
+}
+#overlayHamburger .container a {
+    width: 100%;
+    padding: 4.5px 0;
+    color: var(--colour-text);
+    text-decoration: none;
+    line-height: initial;
+}
+#overlayHamburger .container a:hover {
+    color: var(--colour-page-background);
+    background-color: var(--colour-primary);
+}
+
+@media screen and (max-width: 400px) {
+    #buttonHamburger {
+        min-height: 5vh;
+        max-height: 5vh;
+        min-width: 5.5vh;
+        max-width: 5.5vh;
+    }
+    #buttonHamburger .icon.hamburger {
+        min-height: 4vh;
+        max-height: 4vh;
+        min-width: 4vh;
+        max-width: 4vh;
+    }
+    #overlayHamburger {
+        padding-top: 5vh;
+    }
+}
+
+/* Confirm overlay */
+#overlayConfirm {
+    position: absolute;
+    left: 25vw;
+    width: 50vw;
+    height: 50vh;
+}
+
+#overlayConfirm .row > * {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#overlayConfirm .row .button.button-cancel {
+    margin-right: 0.5vh;
+}
+#overlayConfirm .row .button.submit {
+    margin-left: 0.5vh;
+}
+
+

static/css/components/table.css

@@ -0,0 +1,60 @@
+
+#formFilters .container {
+    max-width: fit-content;
+}
+
+thead, tbody {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+}
+
+th {
+    background-color: transparent;
+}
+td {
+    font-size: min(16px, calc(1vh * 3));
+}
+
+th, td {
+    min-width: fit-content;
+}
+tr:not(:last-child) > td {
+    border-bottom: 1px dashed var(--border-colour);
+}
+td > table > tbody > tr > td {
+    border: none !important;
+}
+th.is_collapsed, td.is_collapsed {
+    display: table-cell !important;
+}
+td.dirty {
+    background-color: var(--colour-primary);
+}
+td:not(.dirty) {
+    background-color: transparent;
+}
+
+tr {
+    min-height: 1px;
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    border-color: var(--border-colour);
+    background-color: transparent;
+}
+
+table button {
+    margin: 0.25vh;
+    padding: 0.5vh 1vh;
+}
+
+table button.active {
+    background-color: var(--colour-page-background);
+}
+
+tr.delete, tr.delete > td {
+    background-color: var(--colour-error);
+}
+
+table div {
+    align-content: center;
+}