Widgets implemented.

tilorswift/style.css

@@ -7,6 +7,7 @@ body {
     padding: 0;
     margin: 0;
     overflow: hidden;
+    font-family: sans-serif;
 }
 
 #level {
@@ -62,36 +63,61 @@ body {
     display: block;
 }
 
-#menu {
+#widget-bar {
     position: fixed;
     display: flex;
     flex-flow: wrap row;
     top: 32px;
     left: 0;
     bottom: 0;
-    padding-top: 20px;
     width: 96px;
-    overflow: hidden;
+    padding: 20px;
     background-color: #cccccc;
     box-shadow: 0 0 20px black;
 }
 
-#menu:hover {
-    animation-name: menuFadeIn;
-    animation-duration: 0.5s;
-    width: 512px;
+.widget-disabled {
+    filter: saturate(0);
 }
 
 #map {
     position: fixed;
     top: 32px;
-    left: 96px;
+    left: 136px;
     right: 0;
     bottom: 0;
     overflow: scroll;
     background-color: black;
 }
 
+#tileset-picker {
+    border: 1px solid black;
+    cursor: pointer;
+    position: relative;
+    overflow: visible;
+}
+
+#tileset-picker.widget-disabled {
+    cursor: not-allowed;
+}
+
+#tileset-selector {
+    display: none;
+    position: absolute;
+    top: 0;
+    background-color: #cccccc;
+    box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
+}
+
+#tileset-picker:hover > #tileset-selector {
+    display: block;
+}
+
+#tileset-picker.widget-disabled:hover > #tileset-selector {
+    display: none;
+}
+
+
 .field, .button-tile {
     border: 0;
     padding: 0;
@@ -101,6 +127,10 @@ body {
     display: inline-flex;
 }
 
+.button-tile {
+    margin: 2px;
+}
+
 .selection {
     width: 100%;
     height: 100%;
@@ -110,4 +140,4 @@ body {
 
 .field:hover .selection {
     opacity: 0.5;
-}
+}