dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWebView: Extract 3-dot menu styling to webui.css

Browse source 
This will be used by an about:history page.
This commit is contained in:
Timothy Flynn 2026-06-10 10:58:24 -04:00 committed by Andreas Kling
parent 409e5edbf1
commit e9fb8afb21
2 changed files with 89 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
Base/res/ladybird/about-pages/bookmarks.html
View file

@ -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;

83
Base/res/ladybird/about-pages/webui.css
View file

@ -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)));
}