diff --git a/server/index.html b/server/index.html
index 042671a..0c7222d 100755
--- a/server/index.html
+++ b/server/index.html
@@ -29,6 +29,25 @@
font-family: sans-serif;
}
+ html,
+ body,
+ #focus {
+ width: 100%;
+ }
+
+ #toybox-column,
+ #toybox-tokens {
+ flex: 1;
+ }
+
+ .TokenTools {
+ flex-basis: 154px;
+ }
+
+ #toypad-column {
+ flex-basis: 962px;
+ }
+
#header {
margin-top: 1em;
}
@@ -77,34 +96,42 @@
}
.container {
- width: 90%;
- margin: auto;
background-color: #efefef;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
padding: 1em;
- margin-bottom: 1.5em;
border-radius: 0.50rem;
display: inline-flexbox;
position: relative;
- max-width: 90%;
+ margin: 1.5em auto;
}
.flex-container {
flex-direction: column;
- width: 90%;
- max-width: 90%;
margin: auto;
background-color: #efefef;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
padding: 1em;
- margin-bottom: 1.5em;
display: flex;
min-height: 100px;
- min-width: 50%;
border-radius: 0.50rem;
position: relative;
}
+ .layout-column
+ {
+ margin: 1.5em 0.75em;
+ }
+
+ .layout-column:first-child
+ {
+ margin-left: 1.5em;
+ }
+
+ .layout-column:last-child
+ {
+ margin-right: 1.5em;
+ }
+
#tag-creation-container {
display: inline-flex;
}
@@ -158,9 +185,21 @@
position: relative;
}
+ .item.filtered {
+ background-color: #994100;
+ }
+
+
+ #toybox-tokens .item.filtered {
+ display: none !important;
+ }
+
.item:hover,
.item:focus,
- .item:active {
+ .item:active,
+ .item.filtered:hover,
+ .item.filtered:focus,
+ .item.filtered:active {
background-color: #c77800;
transition: background-color 250ms;
}
@@ -169,9 +208,16 @@
background-color: #9ccc65;
}
+ .item.filtered[data-type="vehicle"] {
+ background-color: #366600
+ }
+
.item[data-type="vehicle"]:hover,
.item[data-type="vehicle"]:focus,
- .item[data-type="vehicle"]:active {
+ .item[data-type="vehicle"]:active,
+ .item.filtered[data-type="vehicle"]:hover,
+ .item.filtered[data-type="vehicle"]:focus,
+ .item.filtered[data-type="vehicle"]:active {
background-color: #6b9b37;
}
@@ -202,6 +248,8 @@
#token-box {
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0%), 0 6px 20px 0 rgb(0 0 0 / 0%);
flex-direction: row;
+ justify-content: center;
+ margin: 0;
}
.box.box-edit {
@@ -242,7 +290,6 @@
list-style-type: none;
margin: 0;
padding: 0;
- width: 45vw;
border-radius: 0.50rem;
min-height: auto;
margin-right: 0.5em;
@@ -250,7 +297,6 @@
height: 45vh;
overflow-y: scroll;
position: relative;
- width: 80%;
}
#toybox-tokens li {
@@ -264,14 +310,22 @@
align-items: center;
}
- @media screen and (max-width: 900px) {
+ .filter {
+ display: inline-block;
+ margin: 10px;
+ }
+
+ .filter label, .filter input {
+ display: block;
+ }
+
+ @media screen and (max-width: 1556px) {
body {
overflow-x: hidden;
}
#layout-controller {
flex-direction: column;
- width:98%
}
#toybox-tokens {
@@ -281,9 +335,21 @@
.flex-container{
min-width: 80vw;
}
- }
-
+ .layout-column,
+ .layout-column:first-child,
+ .layout-column:last-child {
+ margin: 1.5em;
+ }
+
+ #toypad-column {
+ flex-basis: 0;
+ }
+
+ #toybox-column {
+ width: calc(100% - 80px);
+ }
+ }