Improve design further

* Unify home and lobby design further * Move lobby header buttons into popover menu * Fixes #270 > While it doesn't address what the issue mentioned, there is now a > lable in the menu and the menu icon should be well known by most > people, given its the "burger" icon, even though its a bit missused.
scribble-rs · Oct 17, 2024 · 9fdf295 · 9fdf295
1 parent 86a2ffd
commit 9fdf295
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 218 deletions.
diff --git a/internal/frontend/resources/base.css b/internal/frontend/resources/base.css
diff --git a/internal/frontend/resources/lobby.css b/internal/frontend/resources/lobby.css
@@ -1,3 +1,81 @@
+.noscript {
+    display: flex;
+    font-size: 2.5rem;
+    font-weight: bold;
+    justify-content: center;
+    border-bottom: 1rem solid black;
+    padding: 10px;
+}
+
+.custom-check-or-radio {
+    /* Little hack in order to hide the original components of the check/radio button */
+    opacity: 0.0;
+    position: absolute;
+}
+
+.input-container {
+    justify-content: center;
+    align-items: center;
+    display: inline-grid;
+    grid-template-columns: auto auto auto auto;
+    column-gap: 20px;
+    row-gap: 10px;
+}
+
+.input-container>b {
+    align-self: baseline;
+}
+
+.input-container>input[type="checkbox"] {
+    /* By default checkboxes seem to have a bigger margin on the left. */
+    margin-left: 0;
+    margin-right: 0;
+}
+
+kbd {
+    background-color: #eee;
+    border-radius: 3px;
+    border: 1px solid #b4b4b4;
+    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), 0 2px 0 0 rgb(255 255 255 / 70%) inset;
+    color: #333;
+    display: inline-block;
+    font-size: .85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+}
+
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px),
+(orientation: portrait) or (max-aspect-ratio: 4/3) {
+    h1 {
+        font-size: 4rem;
+    }
+
+    h2 {
+        font-size: 2rem;
+    }
+
+    .input-container {
+        align-items: start;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: 5px;
+    }
+
+    .input-container>input[type="checkbox"] {
+        width: initial;
+    }
+
+    .input-container>* {
+        width: 100%;
+        /* These two prevent blow-out of the input elements */
+        display: block;
+        box-sizing: border-box;
+    }
+}
+
 .ready-check-box-wrapper {
     display: flex;
     align-self: center;
@@ -223,10 +301,6 @@
     border-radius: 0 0 var(--component-border-radius) var(--component-border-radius);
 }
 
-input[type="text"]:focus {
-    background-color: rgb(250, 211, 252);
-}
-
 .dialog-title {
     margin-bottom: 1rem;
     font-size: 2.75rem;
@@ -254,25 +328,16 @@ input[type="text"]:focus {
     align-items: center;
     justify-content: center;
     margin-top: 1em;
+    gap: 0.25rem;
 }
 
-.dialog-button+.dialog-button {
-    margin-left: 0.25rem;
-}
-
-button:hover,
-input[type="button"]:hover,
 .line-width-button-content:hover,
 #color-picker:hover {
-    /** Important insures it won't be prevented by a 'transparent' main color*/
-    background-color: rgb(244, 183, 247) !important;
+    background-color: var(--component-hover-background);
 }
 
-button:active,
-input[type="button"]:active,
 #color-picker:active {
-    /** Important insures it won't be prevented by a 'transparent' main color*/
-    background-color: rgb(243, 132, 247) !important;
+    background-color: var(--component-active-background);
 }
 
 .header-button {
@@ -303,17 +368,17 @@ input[type="button"]:active,
 }
 
 .line-width-button-content {
-    background-color: rgb(218, 218, 218);
+    background-color: var(--component-base-color);
 }
 
 .line-width-button:checked+.line-width-button-content {
-    background-color: rgb(243, 132, 247);
+    background-color: var(--component-active-background);
 }
 
 #color-picker {
     border: 0;
     border-radius: var(--component-border-radius);
-    background-color: rgb(218, 218, 218);
+    background-color: var(--component-base-color);
     height: 50px;
     width: 50px;
     padding: 0;
@@ -330,8 +395,6 @@ input[type="button"]:active,
     width: 50px;
     border: 0;
     padding: 0;
-    background-color: rgb(218, 218, 218);
-    border-radius: var(--component-border-radius);
 }
 
 .canvas-button>img {
@@ -361,6 +424,7 @@ input[type="button"]:active,
     height: 24px;
     width: 24px;
     border: 0;
+    border-radius: 0;
 }
 
 .color-button::-moz-focus-inner {
@@ -614,3 +678,24 @@ input[type="button"]:active,
         max-height: 5rem;
     }
 }
+
+#menu {
+    position: absolute;
+    inset: unset;
+    border: 1px solid gray;
+    border-radius: var(--component-border-radius);
+}
+
+.menu-list {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 5px;
+}
+
+.menu-item {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    font-size: 1rem !important;
+}
diff --git a/internal/frontend/resources/lobby_create.css b/internal/frontend/resources/lobby_create.css
@@ -3,47 +3,6 @@
     margin: 0;
 }
 
-select,
-input,
-button,
-textarea {
-    color: rgb(238, 230, 230);
-    background-color: var(--component-base-color);
-    border-radius: var(--component-border-radius);
-    border: 2px hidden var(--outline--color);
-}
-
-input:hover,
-button:hover,
-select:hover,
-textarea:hover {
-    background-color: var(--component-hover-background);
-}
-
-input:focus,
-button:focus,
-select:focus,
-textarea:focus {
-    background-color: var(--component-focus-background);
-}
-
-button:active {
-    background-color: var(--component-active-background);
-}
-
-input,
-select {
-    padding-left: 0.35rem;
-    padding-right: 0.35rem;
-}
-
-textarea {
-    padding-left: 0.40rem;
-    padding-top: 0.20rem;
-    min-width: 0;
-    resize: none;
-}
-
 #app {
     display: flex;
     flex-direction: column;
@@ -242,6 +201,9 @@ textarea {
     height: 3rem;
     width: 5rem;
     font-size: 1.5rem;
+    /* Since the buttons are the same color as the background, we use a boder,
+     * even though it isn't consistent. */
+    border: 1px solid gray;
 }
 
 .custom-tag {
@@ -285,7 +247,6 @@ textarea {
 .create-button {
     height: 2rem;
     flex: 1;
-    background-color: color-mix(in srgb, var(--component-base-color), #000 25%)
 }
 
 .number-input {
@@ -294,7 +255,7 @@ textarea {
     padding: 0;
     background-color: var(--component-base-color);
     border-radius: var(--component-border-radius);
-    border: 2px hidden var(--outline--color);
+    border: 2px hidden;
 }
 
 .number-input>button {

diff --git a/internal/frontend/resources/menu.svg b/internal/frontend/resources/menu.svg