mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
css: replace admin-form-row/admin-label/admin-input/select/textarea classes with semantic selectors
Remove five presentational classes from admin forms and replace with structural CSS selectors scoped to .admin-form: - .admin-form-row → .admin-form > div:not(.admin-submit-wrap) Grid layout (260px label col + 1fr input col) applied directly to div children of the form; submit-wrap div excluded via :not(). - .admin-label → .admin-form > div:not(.admin-submit-wrap) > label Scoped to the direct label child of each form row div; does not bleed into nested checkbox labels inside .admin-checkbox-list. - .admin-input / .admin-select / .admin-textarea → .admin-form input:not([type=checkbox|radio|file|hidden|submit]) → .admin-form select → .admin-form textarea Also extended to .admin-inline-form input/select (tags page) so the tags table inputs retain identical base styling and focus colour. Templates updated: add.php, edit.php, login.php, account.php, pages-edit.php, import.php, tags.php, templates/partials/form/jury-fieldset.php — all class= attributes for the five removed classes stripped. import.php: added 'admin-form' class alongside 'admin-import-area' so its single file-input row gets the grid row treatment; submit div was already using admin-submit-wrap so it is correctly excluded. No visual change — selectors target the same elements as before.
This commit is contained in:
@@ -110,7 +110,7 @@
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.admin-form-row {
|
||||
.admin-form > div:not(.admin-submit-wrap) {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
align-items: start;
|
||||
@@ -119,20 +119,23 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.admin-form-row:last-of-type {
|
||||
.admin-form > div:not(.admin-submit-wrap):last-of-type {
|
||||
border-bottom: 1px solid var(--admin-border);
|
||||
}
|
||||
|
||||
.admin-label {
|
||||
.admin-form > div:not(.admin-submit-wrap) > label {
|
||||
font-size: 0.92rem;
|
||||
color: var(--admin-text);
|
||||
padding-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.admin-input,
|
||||
.admin-select,
|
||||
.admin-textarea {
|
||||
.admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]),
|
||||
.admin-form select,
|
||||
.admin-form textarea,
|
||||
.admin-inline-form input[type="text"],
|
||||
.admin-inline-form input[type="number"],
|
||||
.admin-inline-form select {
|
||||
width: 100%;
|
||||
background: var(--admin-input-bg);
|
||||
border: none;
|
||||
@@ -147,26 +150,29 @@
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.admin-input:focus,
|
||||
.admin-select:focus,
|
||||
.admin-textarea:focus {
|
||||
.admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):focus,
|
||||
.admin-form select:focus,
|
||||
.admin-form textarea:focus,
|
||||
.admin-inline-form input:focus,
|
||||
.admin-inline-form select:focus {
|
||||
border-bottom-color: var(--admin-purple);
|
||||
}
|
||||
|
||||
.admin-input::placeholder,
|
||||
.admin-textarea::placeholder {
|
||||
.admin-form input::placeholder,
|
||||
.admin-form textarea::placeholder {
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.admin-textarea {
|
||||
.admin-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Select custom arrow */
|
||||
.admin-select {
|
||||
.admin-form select,
|
||||
.admin-inline-form select {
|
||||
cursor: pointer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
@@ -174,7 +180,8 @@
|
||||
padding-right: 1.2rem;
|
||||
}
|
||||
|
||||
.admin-select option {
|
||||
.admin-form select option,
|
||||
.admin-inline-form select option {
|
||||
background: var(--admin-bg);
|
||||
color: var(--admin-text);
|
||||
}
|
||||
@@ -598,13 +605,13 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-login-box .admin-form-row {
|
||||
.admin-login-box .admin-form > div:not(.admin-submit-wrap) {
|
||||
grid-template-columns: 1fr;
|
||||
border: none;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
|
||||
.admin-login-box .admin-label {
|
||||
.admin-login-box .admin-form > div:not(.admin-submit-wrap) > label {
|
||||
font-size: 0.82rem;
|
||||
color: var(--admin-text-muted);
|
||||
padding: 0;
|
||||
@@ -692,12 +699,14 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-input--inline {
|
||||
.admin-input--inline,
|
||||
.admin-inline-form input[type="text"] {
|
||||
padding: 0.28rem 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.admin-select--inline {
|
||||
.admin-select--inline,
|
||||
.admin-inline-form select {
|
||||
padding: 0.28rem 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user