From e9fb8afb215f5d2aa02f6da085e5da2801c6c70f Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Wed, 10 Jun 2026 10:58:24 -0400
Subject: [PATCH] LibWebView: Extract 3-dot menu styling to webui.css

This will be used by an about:history page.
---
 Base/res/ladybird/about-pages/bookmarks.html | 101 ++-----------------
 Base/res/ladybird/about-pages/webui.css      |  83 +++++++++++++++
 2 files changed, 89 insertions(+), 95 deletions(-)

diff --git a/Base/res/ladybird/about-pages/bookmarks.html b/Base/res/ladybird/about-pages/bookmarks.html
index 9f90d2353c..f976514493 100644
--- a/Base/res/ladybird/about-pages/bookmarks.html
+++ b/Base/res/ladybird/about-pages/bookmarks.html
@@ -6,102 +6,13 @@
         <link rel="stylesheet" type="text/css" href="resource://ladybird/ladybird.css" />
         <link rel="stylesheet" type="text/css" href="resource://ladybird/about-pages/webui.css" />
         <style>
-            @media (prefers-color-scheme: light) {
-                :root {
-                    --tree-hover-color: #e8e8e8;
-                    --tree-selected-color: #d8d8f8;
-                    --empty-text-color: #888;
-                    --url-text-color: #666;
-                    --menu-background-color: #fff;
-                    --menu-border-color: #d8d8d8;
-                    --menu-shadow-color: rgba(0, 0, 0, 0.12);
-                }
-            }
-
-            @media (prefers-color-scheme: dark) {
-                :root {
-                    --tree-hover-color: #2e2e2e;
-                    --tree-selected-color: #35355a;
-                    --empty-text-color: #777;
-                    --url-text-color: #999;
-                    --menu-background-color: #2a2a2a;
-                    --menu-border-color: #4a4a4a;
-                    --menu-shadow-color: rgba(0, 0, 0, 0.4);
-                }
-            }
-
             .header-menu {
                 position: relative;
                 margin-left: auto;
             }
 
-            .menu-toggle {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                width: 32px;
-                height: 32px;
-
-                color: inherit;
-                background: none;
-                border: none;
-                border-radius: 4px;
-
-                cursor: pointer;
-            }
-
-            .menu-toggle:hover {
-                background-color: var(--tree-hover-color);
-            }
-
-            .menu-toggle svg {
-                width: 20px;
-                height: 20px;
-            }
-
-            .menu-dropdown {
-                position: absolute;
-                top: 100%;
-                right: 0;
-                z-index: 10;
-
-                display: flex;
-                flex-direction: column;
-
-                min-width: 200px;
-                padding: 4px;
-                margin-top: 4px;
-
-                background-color: var(--menu-background-color);
-                border: 1px solid var(--menu-border-color);
-                border-radius: 6px;
-                box-shadow: 0 4px 12px var(--menu-shadow-color);
-            }
-
-            .menu-dropdown.hidden {
-                display: none;
-            }
-
-            .menu-item {
-                color: inherit;
-                background: none;
-                border: none;
-                border-radius: 4px;
-
-                padding: 8px 12px;
-                font-size: 14px;
-                text-align: left;
-
-                cursor: pointer;
-            }
-
-            .menu-item:hover {
-                background-color: var(--tree-hover-color);
-            }
-
             .tree-empty {
-                color: var(--empty-text-color);
+                color: var(--secondary-text-color);
 
                 padding: 40px 20px;
 
@@ -127,11 +38,11 @@
             }
 
             .tree-item-row.drag-over-inside {
-                background-color: var(--tree-selected-color);
+                background-color: var(--item-selected-color);
             }
 
             .tree-item-row:hover {
-                background-color: var(--tree-hover-color);
+                background-color: var(--item-hover-color);
             }
 
             .tree-item-row.expandable {
@@ -217,7 +128,7 @@
             }
 
             .item-url {
-                color: var(--url-text-color);
+                color: var(--secondary-text-color);
 
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -229,12 +140,12 @@
 
             .search-highlight {
                 color: inherit;
-                background-color: var(--tree-selected-color);
+                background-color: var(--item-selected-color);
                 border-radius: 2px;
             }
 
             .search-no-results {
-                color: var(--empty-text-color);
+                color: var(--secondary-text-color);
 
                 padding: 40px 20px;
 
diff --git a/Base/res/ladybird/about-pages/webui.css b/Base/res/ladybird/about-pages/webui.css
index 25eb539a89..8f9be527ea 100644
--- a/Base/res/ladybird/about-pages/webui.css
+++ b/Base/res/ladybird/about-pages/webui.css
@@ -3,6 +3,15 @@
         --border-color: #dcdde1;
         --card-background-color: #f5f5f5;
         --card-header-background-color: #f0f2f5;
+        --icon-background-color: #dfe8f5;
+        --icon-color: #37597d;
+        --item-hover-color: #eceff3;
+        --item-selected-color: #dfe8f5;
+        --menu-background-color: #fff;
+        --menu-border-color: #d8d8d8;
+        --menu-shadow-color: rgba(0, 0, 0, 0.12);
+        --secondary-text-color: #65707d;
+        --separator-color: #e3e6eb;
     }
 }
 
@@ -11,6 +20,15 @@
         --border-color: #3d3d3d;
         --card-background-color: #242424;
         --card-header-background-color: #252525;
+        --icon-background-color: #243748;
+        --icon-color: #9bc3ef;
+        --item-hover-color: #2a313a;
+        --item-selected-color: #243748;
+        --menu-background-color: #2a2a2a;
+        --menu-border-color: #4a4a4a;
+        --menu-shadow-color: rgba(0, 0, 0, 0.4);
+        --secondary-text-color: #a5b0bc;
+        --separator-color: #323841;
     }
 }
 
@@ -114,3 +132,68 @@ header img {
 
     padding: 10px 12px;
 }
+
+.menu-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: 4px;
+
+    cursor: pointer;
+}
+
+.menu-toggle:hover {
+    background-color: var(--menu-toggle-hover-color, var(--item-hover-color));
+}
+
+.menu-toggle svg {
+    width: 20px;
+    height: 20px;
+}
+
+.menu-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 10;
+
+    display: flex;
+    flex-direction: column;
+
+    min-width: 200px;
+    padding: 4px;
+    margin-top: 4px;
+
+    background-color: var(--menu-background-color);
+    border: 1px solid var(--menu-border-color);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px var(--menu-shadow-color);
+}
+
+.menu-dropdown.hidden {
+    display: none;
+}
+
+.menu-item {
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: 4px;
+
+    padding: 8px 12px;
+    font-size: 14px;
+    text-align: left;
+
+    cursor: pointer;
+}
+
+.menu-item:hover {
+    background-color: var(--menu-item-hover-color, var(--menu-toggle-hover-color, var(--item-hover-color)));
+}