Refactor admin page

This commit is contained in:
2026-01-13 09:37:24 +01:00
parent 77fcae3450
commit 7c9e289740
9 changed files with 294 additions and 26 deletions

View File

@@ -177,6 +177,73 @@ div.luxtools-scratchpad .luxtools-scratchpad-error {
font-style: italic;
}
/* Admin: settings page form layout */
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block {
display: flex;
align-items: flex-start;
gap: 0.75em;
text-align: left;
}
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > span {
flex: 0 0 35%;
text-align: left;
margin: 0;
padding-top: 0.2em;
}
/* The admin page markup uses <br/> to create a new line; in this layout we keep
* label + control in one row.
*/
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > br {
display: none;
}
div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
flex: 1 1 auto;
margin-left: auto;
width: auto;
max-width: 65%;
box-sizing: border-box;
text-align: left;
}
/* Dropdowns: don't stretch; size to content, but keep them on the right. */
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
flex: 0 0 auto;
margin-left: 0;
width: max-content;
max-width: 65%;
}
/* Checkbox controls: keep them in the control column, left-aligned. */
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block input[type="checkbox"] {
margin-left: 0;
align-self: center;
}
/* On narrow screens, stack label and control to keep things readable. */
@media (max-width: 600px) {
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block {
display: block;
}
div.plugin_luxtools_admin form.plugin_luxtools_admin_form label.block > br {
display: block;
}
div.plugin_luxtools_admin form.plugin_luxtools_admin_form textarea.edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="text"].edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form input[type="number"].edit,
div.plugin_luxtools_admin form.plugin_luxtools_admin_form select {
width: 100%;
max-width: 100%;
}
}
/* Disable background scrolling while the lightbox is open. */
html.luxtools-noscroll,
html.luxtools-noscroll body {