diff --git a/style.css b/style.css
index 887b077..9496a7f 100644
--- a/style.css
+++ b/style.css
@@ -64,7 +64,7 @@ input {
.hero {
display: grid;
- grid-template-columns: minmax(0, 1fr) auto auto;
+ grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: start;
padding: 32px 0 22px;
@@ -132,6 +132,28 @@ h1 {
margin-top: 12px;
}
+.search-box .dashboard-menu {
+ position: absolute;
+ right: 4px;
+ top: 50%;
+ transform: translateY(-50%);
+ margin-top: 0;
+ z-index: 30;
+}
+
+.search-box .dashboard-menu-button {
+ width: 36px;
+ height: 36px;
+ background: transparent;
+ border: none;
+}
+
+.search-box .dashboard-menu-button:hover,
+.search-box .dashboard-menu-button.is-open {
+ background: rgba(103, 232, 249, 0.1);
+ border-color: transparent;
+}
+
.dashboard-menu-button {
width: 42px;
height: 42px;
@@ -259,7 +281,7 @@ main {
top: 0;
z-index: 10;
display: grid;
- grid-template-columns: minmax(240px, 360px) 1fr;
+ grid-template-columns: 1fr minmax(240px, 360px);
gap: 10px 12px;
align-items: center;
padding: 12px 0;
@@ -270,6 +292,12 @@ main {
position: relative;
display: flex;
align-items: center;
+ grid-column: 2;
+}
+
+.view-toggle {
+ grid-column: 1;
+ grid-row: 1;
}
.search-icon {
@@ -284,7 +312,7 @@ main {
.search-box input {
width: 100%;
height: 44px;
- padding: 0 14px 0 40px;
+ padding: 0 52px 0 40px;
color: var(--text);
background: rgba(17, 22, 36, 0.92);
border: 1px solid var(--border);
@@ -297,6 +325,13 @@ main {
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
}
+.search-box input::-webkit-search-decoration,
+.search-box input::-webkit-search-cancel-button,
+.search-box input::-webkit-search-results-button,
+.search-box input::-webkit-search-results-decoration {
+ display: none;
+}
+
.category-filters {
margin: 16px 0 6px 0;
display: flex;
@@ -1054,12 +1089,6 @@ main {
grid-column: 1 / 2;
}
- .dashboard-menu {
- grid-column: 2 / 3;
- grid-row: 1;
- justify-self: end;
- }
-
.admin-actions {
justify-content: flex-start;
}
@@ -1093,15 +1122,21 @@ main {
grid-template-columns: 1fr;
}
- .segments {
- justify-content: flex-start;
+ .search-box {
+ grid-column: auto;
}
.view-toggle {
+ grid-column: auto;
+ grid-row: auto;
width: 100%;
grid-template-columns: repeat(3, 1fr);
}
+ .segments {
+ justify-content: flex-start;
+ }
+
.view-option {
min-width: 0;
}