Dark colors for search popout

CHANGELOG.md

@@ -1,7 +1,7 @@
-### 1.2.4rc2: 2023-03-23
+### 1.2.4: 2023-03-23
 
-* Embed styles
-* Make outside embeds more modern looking
+* Dark colors for search popout
+* Full width search popout on mobile
 
 ### 1.2.3: 2023-03-23
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mastodon-bird-ui",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "",
   "main": "index.js",
   "scripts": {

style.css

@@ -1,5 +1,5 @@
 /* Mastodon Bird UI by @[email protected]
-   1.2.4rc2 */
+   1.2.4 */
 
 /* CSS variables */
 :root {
@@ -74,6 +74,19 @@
   .layout-single-column::-webkit-scrollbar {
     display: none;
   }
+
+  /* Full width search popout on mobile */
+  .layout-single-column div:has(.search-popout) {
+
+    /* It's inlined so we have to use !important */
+    /* stylelint-disable-next-line */
+    max-width: calc(100% - 30px) !important;
+    transform: translateX(15px);
+
+    /* It's inlined so we have to use !important */
+    /* stylelint-disable-next-line */
+    width: calc(100% - 30px) !important;
+  }
 }
 
 body.embed,
@@ -314,6 +327,7 @@ a.status-card.compact .status-card__host {
 }
 
 /* More subtle box-shadow for dropdown-menu */
+.layout-single-column .search-popout,
 .layout-single-column .dropdown-menu {
   box-shadow: 2px 4px 16px rgb(0 0 0 / .01);
 }
@@ -468,6 +482,7 @@ body.embed .status__content a,
 }
 
 /* Things like notification status update text that should be dim */
+.layout-single-column .search-popout > h4,
 .layout-single-column .status-check-box__status .detailed-status__display-name,
 .layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text,
 .layout-single-column .status-card .status-card__description,
@@ -771,6 +786,17 @@ body.embed .detailed-status,
   color: var(--color-dim);
 }
 
+/* Search panel that opens when focusing Saerch or paste URL field */
+.layout-single-column .search-popout {
+  background-color: var(--color-dark);
+  border-color: var(--color-dark);
+  color: var(--color-dim);
+}
+
+.layout-single-column .search-popout em {
+  color: var(--color-light-text);
+}
+
 /* URL preview card box */
 /* stylelint-disable-next-line */
 .layout-single-column a.status-card .status-card__content,
@@ -1420,6 +1446,8 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet,
   text-transform: unset;
 }
 
+.layout-single-column h4,
+.layout-single-column .search-popout h4,
 .layout-single-column .server-banner h4 {
   text-transform: unset;
 }