Style tweaks

src/routes/_layout.svelte

@@ -1,3 +1,10 @@
 <main>
 	<slot></slot>
 </main>
+
+<style>
+	main {
+		position: relative;
+		height: 100%;
+	}
+</style>

src/routes/room.svelte

@@ -85,34 +85,38 @@
 
 <list>
     {#if room}
-        <div class="exit"><a href={process.env.URL}>Вернуться на главную</a></div>
-        <h1>{room.name}</h1>
-        <p class="subtext">По {room.group == "true" ? "бригадам" : "вариантам"}</p>
-        <ol>
-        {#each room.teams as _, i}
-            <li class={room.group === "true" ? "group" : "individual"} on:click={() => selectInput(i)} style="border-color: {enabledInput==i ? 'gray' : 'lightgray'}">
-                {#each room.teams[i] as name}
-                    <span class="name" style="background-color: {name.toColor()}">
-                        <span on:click={() => highlightName(name, i)}>{name}</span>
-                        {#if (i === highlightedTeam && name === highlightedName)}
-                            <span class="deleteName" on:click={removeName}>×</span>
+        <div class="page-wrapper">
+            <div>
+                <div class="exit"><a href={process.env.URL}>Вернуться на главную</a></div>
+                <h1>{room.name}</h1>
+                <p class="subtext">По {room.group == "true" ? "бригадам" : "вариантам"}</p>
+                <ol>
+                {#each room.teams as _, i}
+                    <li class={room.group === "true" ? "group" : "individual"} on:click={() => selectInput(i)} style="border-color: {enabledInput==i ? 'gray' : 'lightgray'}">
+                        {#each room.teams[i] as name}
+                            <span class="name" style="background-color: {name.toColor()}">
+                                <span on:click={() => highlightName(name, i)}>{name}</span>
+                                {#if (i === highlightedTeam && name === highlightedName)}
+                                    <span class="deleteName" on:click={removeName}>×</span>
+                                {/if}
+                            </span>
+                        {/each}
+                        {#if room.teams[i].length == 0 || room.group == "true"}
+                            <img src="/plus.svg" alt="plus" class="addName" on:click={() => selectVar(i)} />
+                            <input class="nameInput" type="text" bind:value={nameInput[i]} on:keyup={(event) => selectVar(i, event)}>
                         {/if}
-                    </span>
+                    </li>
                 {/each}
-                {#if room.teams[i].length == 0 || room.group == "true"}
-                    <input class="addName" type="button" value="+" on:click={() => selectVar(i)}>
-                    <input class="nameInput" type="text" bind:value={nameInput[i]} on:keyup={(event) => selectVar(i, event)}>
-                {/if}
-            </li>
-        {/each}
-        </ol>
+                </ol>
+            </div>
 
-        <span class="footer">
-            Код подключения: <code>{parsed.id}</code>
-            <a href="https://github.com/anatolykopyl/variants">
-                <img src="/github.png" alt="github" class="githubLink">
-            </a>
-        </span>
+            <div class="footer">
+                Код подключения: <code>{parsed.id}</code>
+                <a href="https://github.com/anatolykopyl/variants">
+                    <img src="/github.png" alt="github" class="githubLink">
+                </a>
+            </div>
+        </div>
     {:else if res==undefined}
         <div class="status">Загрузка...</div>
     {:else if res.status==404}
@@ -125,11 +129,22 @@
 </list>
 
 <style>
+    list {
+        position: relative;
+    }
+
     h1 {
         font-weight: 100;
         margin-bottom: 0px;
     }
 
+    .page-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
     .exit {
         height: 0px;
         width: 100%;
@@ -191,6 +206,7 @@
         width: 1.2em;
         height: 1.2em;
         border-radius: 100%;
+        color: black;
         background-color: yellowgreen;
         border: none;
         padding: 0px;

static/global.css

@@ -1,4 +1,4 @@
-html, body {
+html, body, #sapper {
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -71,9 +71,7 @@ button:focus {
 .footer {
     text-align: center;
     font-size: small;
-    position: fixed;
-    left: 0;
-    bottom: 0;
+    position: relative;
     width: 100%;
     padding-bottom: 10px;
 }

static/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
+  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
+</svg>