mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-05 23:59:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Base: Generalize some about:settings CSS classes

Browse source 
The dialog classes here have specific names that will be used in another
dialog. This patch renames them to be more generic. And moves a border
style to not assume a dialog-footer element will exist.
This commit is contained in:
Timothy Flynn 2025-04-02 19:20:13 -04:00 • committed by Jelle Raaijmakers
commit aad95d8d9d
Notes: github-actions[bot] 2025-04-04 08:17:49 +00:00
1 changed files with 18 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

35
Base/res/ladybird/about-pages/settings.html
View file

@ -168,7 +168,6 @@
height: 450px; height: 450px;
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -188,6 +187,8 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
border-top: 1px solid var(--border-color);
padding: 15px 20px; padding: 15px 20px;
gap: 10px; gap: 10px;
} }
@ -197,7 +198,7 @@
font-weight: 500; font-weight: 500;
} }
dialog .dialog-close { dialog .dialog-button {
background: none; background: none;
border: none; border: none;
outline: none; outline: none;
@ -210,11 +211,11 @@
cursor: pointer; cursor: pointer;
} }
dialog .dialog-close:hover { dialog .dialog-button:hover {
opacity: 1; opacity: 1;
} }
dialog .dialog-site-list { dialog .dialog-list {
outline: 1px solid var(--border-color); outline: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
@ -226,7 +227,7 @@
flex-grow: 1; flex-grow: 1;
} }
dialog .dialog-site-item { dialog .dialog-list-item {
padding: 10px; padding: 10px;
display: flex; display: flex;
@ -234,20 +235,20 @@
align-items: center; align-items: center;
} }
dialog .dialog-site-item:hover { dialog .dialog-list-item:hover {
background-color: var(--card-header-background-color); background-color: var(--card-header-background-color);
} }
dialog .dialog-site-item-placeholder { dialog .dialog-list-item-placeholder {
padding: 10px; padding: 10px;
opacity: 0.6; opacity: 0.6;
} }
dialog .dialog-site-item .filter { dialog .dialog-list-item-label {
flex-grow: 1; flex-grow: 1;
} }
dialog .dialog-add-site { dialog .dialog-controls {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -255,7 +256,7 @@
gap: 10px; gap: 10px;
} }
dialog .dialog-add-site input { dialog .dialog-controls input {
flex-grow: 1; flex-grow: 1;
} }
@ -351,7 +352,7 @@
<dialog id="site-settings"> <dialog id="site-settings">
<div class="dialog-header"> <div class="dialog-header">
<h3 id="site-settings-title" class="dialog-title"></h3> <h3 id="site-settings-title" class="dialog-title"></h3>
<button id="site-settings-close" class="close-button dialog-close">&times;</button> <button id="site-settings-close" class="close-button dialog-button">&times;</button>
</div> </div>
<div class="dialog-body"> <div class="dialog-body">
<div class="toggle-container"> <div class="toggle-container">
@ -360,8 +361,8 @@
</div> </div>
<hr /> <hr />
<label>Allowlist</label> <label>Allowlist</label>
<div id="site-settings-list" class="dialog-site-list"></div> <div id="site-settings-list" class="dialog-list"></div>
<div class="dialog-add-site"> <div class="dialog-controls">
<input id="site-settings-input" type="text" placeholder="example.com" /> <input id="site-settings-input" type="text" placeholder="example.com" />
<button id="site-settings-add" class="primary-button">Add&nbsp;Site</button> <button id="site-settings-add" class="primary-button">Add&nbsp;Site</button>
</div> </div>
@ -546,7 +547,7 @@
if (settings.siteFilters.length === 0) { if (settings.siteFilters.length === 0) {
const placeholder = document.createElement("div"); const placeholder = document.createElement("div");
placeholder.className = "dialog-site-item-placeholder"; placeholder.className = "dialog-list-item-placeholder";
placeholder.textContent = "No sites added"; placeholder.textContent = "No sites added";
siteSettingsList.appendChild(placeholder); siteSettingsList.appendChild(placeholder);
@ -554,11 +555,11 @@
settings.siteFilters.forEach(site => { settings.siteFilters.forEach(site => {
const filter = document.createElement("span"); const filter = document.createElement("span");
filter.className = "filter"; filter.className = "dialog-list-item-label";
filter.textContent = site; filter.textContent = site;
const remove = document.createElement("button"); const remove = document.createElement("button");
remove.className = "dialog-close"; remove.className = "dialog-button";
remove.innerHTML = "&times;"; remove.innerHTML = "&times;";
remove.title = `Remove ${site}`; remove.title = `Remove ${site}`;
@ -570,7 +571,7 @@
}); });
const item = document.createElement("div"); const item = document.createElement("div");
item.className = "dialog-site-item"; item.className = "dialog-list-item";
item.appendChild(filter); item.appendChild(filter);
item.appendChild(remove); item.appendChild(remove);