| @@ -304,13 +304,16 @@ body.show-extra-options .options-block.options-block-optional { | |||||
| } | } | ||||
| .menubar-group { | .menubar-group { | ||||
| display: flex; | |||||
| flex-direction: row; | |||||
| display: grid; | |||||
| grid-template-rows: 1fr; | |||||
| grid-auto-flow: column; | |||||
| gap: 5px; | |||||
| padding: 5px 0px; | |||||
| } | } | ||||
| .menubar-group button { | .menubar-group button { | ||||
| width: 48pt; | |||||
| height: 48pt; | |||||
| width: 64pt; | |||||
| height: 64pt; | |||||
| } | } | ||||
| .menubar-group input { | .menubar-group input { | ||||
| @@ -814,8 +817,9 @@ button { | |||||
| .popout-menu { | .popout-menu { | ||||
| display: none; | display: none; | ||||
| flex-direction: column; | |||||
| flex-wrap: nowrap; | |||||
| grid-template-columns: 1fr; | |||||
| gap: 5px; | |||||
| overflow-x: none; | |||||
| overflow-y: scroll; | overflow-y: scroll; | ||||
| max-height: 80vh; | max-height: 80vh; | ||||
| justify-content: start; | justify-content: start; | ||||
| @@ -864,7 +868,7 @@ button { | |||||
| .popout-menu.visible { | .popout-menu.visible { | ||||
| display: flex; | |||||
| display: grid; | |||||
| } | } | ||||
| .menu-button { | .menu-button { | ||||
| @@ -964,9 +968,6 @@ button { | |||||
| align-items: center; | align-items: center; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| padding: 10px 20px 10px 10px; | padding: 10px 20px 10px 10px; | ||||
| border-color: #222; | |||||
| border-width: 5px; | |||||
| border-style: solid; | |||||
| max-width: 400pt; | max-width: 400pt; | ||||
| } | } | ||||
| @@ -1064,9 +1065,6 @@ body.screenshot-mode .scroll-button { | |||||
| justify-content: left space-between; | justify-content: left space-between; | ||||
| padding: 10px 20px 10px 10px; | padding: 10px 20px 10px 10px; | ||||
| background: gray; | background: gray; | ||||
| border-color: darkslategray; | |||||
| border-width: 5px; | |||||
| border-style: solid; | |||||
| } | } | ||||
| .filter-holder.enabled { | .filter-holder.enabled { | ||||
| @@ -1086,9 +1084,6 @@ body.screenshot-mode .scroll-button { | |||||
| justify-content: left; | justify-content: left; | ||||
| padding: 10px 20px 10px 10px; | padding: 10px 20px 10px 10px; | ||||
| background: gray; | background: gray; | ||||
| border-color: darkslategray; | |||||
| border-width: 5px; | |||||
| border-style: solid; | |||||
| text-decoration: none; | text-decoration: none; | ||||
| user-select: none; | user-select: none; | ||||
| -webkit-user-select: none; | -webkit-user-select: none; | ||||
| @@ -59,7 +59,9 @@ | |||||
| </div> | </div> | ||||
| <div class="popout-menu" id="filters-menu"> | <div class="popout-menu" id="filters-menu"> | ||||
| <span class="menubar-group" id="search"> | |||||
| <input id="search-box" type="text" placeholder="Search by name"> | |||||
| </span> | |||||
| </div> | </div> | ||||
| <div class="popout-menu" id="info-menu"> | <div class="popout-menu" id="info-menu"> | ||||
| <a class="info-holder" target="_blank" href="https://www.notion.so/Macrovision-5c7f9377424743358ddf6db5671f439e"> | <a class="info-holder" target="_blank" href="https://www.notion.so/Macrovision-5c7f9377424743358ddf6db5671f439e"> | ||||
| @@ -84,17 +86,13 @@ | |||||
| <i class="fas fa-cogs"></i> | <i class="fas fa-cogs"></i> | ||||
| </button> | </button> | ||||
| <button id="toggle-filters"> | <button id="toggle-filters"> | ||||
| <i class="fas fa-filter"></i> | |||||
| <i class="fas fa-search"></i> | |||||
| </button> | </button> | ||||
| <button id="toggle-info"> | <button id="toggle-info"> | ||||
| <i class="fas fa-info-circle"></i> | <i class="fas fa-info-circle"></i> | ||||
| </button> | </button> | ||||
| </span> | </span> | ||||
| <span class="menubar-group" id="spawners"> | <span class="menubar-group" id="spawners"> | ||||
| <span class="menubar-group" id="search"> | |||||
| <input id="search-box" type="text" placeholder="Search..."> | |||||
| </span> | |||||
| </span> | </span> | ||||
| <span class="menubar-group"> | <span class="menubar-group"> | ||||
| <button id="copy-screenshot"> | <button id="copy-screenshot"> | ||||