Refactor admin page
This commit is contained in:
67
style.css
67
style.css
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user