feat(admin): Reiter „Kompatibilität“ übersetzt und übersichtlicher

Sichtbarer Name „Kompatibilität“ (Slug compatibility bleibt) in Reiter, Hinweisen, Hilfe-Tab, CLI-Hilfe, Guides und readme. Oben eine Übersicht aller Plugins mit Gesamtzustand, Version, Zustand (Wort und Icon), Freigabe-Art in Klartext und Sprunglink; je Plugin erst Zustand und nächster Schritt, dann Aktionen, dann aufklappbare Details (offen bei Handlungsbedarf, ohne JavaScript). Tabellen mit Beschriftung und Kartenansicht bis 375 px, Buttons mit Plugin-Namen im zugänglichen Namen, Kontraste mit Reserve. Doku: Divi leert beim Prüfen den Cache einmal komplett.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Niclas Loosen
2026-11-06 17:39:47 +01:00
co-authored by Claude Opus 5.5
parent 661d3945fd
commit f337a57f26
15 changed files with 507 additions and 100 deletions
+83 -9
View File
@@ -132,7 +132,43 @@
vertical-align: text-bottom;
}
/* Tab "Compatibility": the report is a plain list, the icon replaces the bullet. */
/* Tab "Kompatibilität": one white section per plugin under the overview table. */
.lit-mcp-compat {
/* Jump links from the overview: keep the heading clear of the fixed admin bar. */
scroll-margin-top: 56px;
margin: 24px 0;
padding: 4px 20px 16px;
background: #fff;
border: 1px solid #c3c4c7;
overflow-wrap: break-word;
}
.lit-mcp-compat h3 {
margin: 1.2em 0 0.5em;
font-size: 14px;
}
.lit-mcp-compat-overview {
margin-bottom: 8px;
}
.lit-mcp-compat .notice.inline ul {
margin: 0 0 0.5em 2em;
list-style: disc;
}
.lit-mcp-compat-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.lit-mcp-compat-actions form {
margin: 0;
}
/* The report is a plain list, the icon replaces the bullet. */
.lit-mcp-compat-report {
list-style: none;
margin-left: 0;
@@ -144,7 +180,7 @@
}
.lit-mcp-status-yes-alt .dashicons {
color: #008a20;
color: #007017;
}
.lit-mcp-status-warning .dashicons {
@@ -155,6 +191,10 @@
color: #d63638;
}
.lit-mcp-status-minus .dashicons {
color: #50575e;
}
/* Folded help ("Wo finde ich das?") and the Divi detail table. */
.lit-mcp-hint,
.lit-mcp-compat-details {
@@ -176,6 +216,12 @@
margin: 1em 0 0.5em;
}
.lit-mcp-compat-details summary:focus-visible,
.lit-mcp-hint summary:focus-visible {
outline: 2px solid #2271b1;
outline-offset: 2px;
}
/* Only on phones: text that replaces a hidden column. */
.lit-mcp-phone-only {
display: none;
@@ -435,9 +481,14 @@
}
}
/* Tab "Compatibility": on phones each row of the feature table becomes a card named by data-label. */
/* Tab "Kompatibilität": on phones each row of the overview and feature tables becomes a card named by data-label. */
@media screen and (max-width: 782px) {
.lit-mcp-compat-features thead {
.lit-mcp-compat {
padding: 4px 12px 12px;
}
.lit-mcp-compat-features thead,
.lit-mcp-compat-overview thead {
position: absolute;
width: 1px;
height: 1px;
@@ -446,17 +497,23 @@
}
.lit-mcp-compat-features tr,
.lit-mcp-compat-features td {
.lit-mcp-compat-features th,
.lit-mcp-compat-features td,
.lit-mcp-compat-overview tr,
.lit-mcp-compat-overview th,
.lit-mcp-compat-overview td {
display: block;
}
/* One card per row: a rule and room between them, the feature name first and bold. */
.lit-mcp-compat-features tr {
/* One card per row: a rule and room between them, the name first and bold. */
.lit-mcp-compat-features tr,
.lit-mcp-compat-overview tr {
padding: 8px 0;
border-bottom: 1px solid #c3c4c7;
}
.lit-mcp-compat-features td:first-child {
.lit-mcp-compat-features th:first-child,
.lit-mcp-compat-overview th:first-child {
font-weight: 600;
}
@@ -464,7 +521,10 @@
overflow-wrap: anywhere;
}
.lit-mcp-compat-features td::before {
.lit-mcp-compat-features th::before,
.lit-mcp-compat-features td::before,
.lit-mcp-compat-overview th::before,
.lit-mcp-compat-overview td::before {
content: attr(data-label) ": ";
font-weight: 600;
}
@@ -472,6 +532,16 @@
.lit-mcp-compat-features ul {
margin: 0;
}
/* Touch targets: the link in the overview and the check/release buttons. */
.lit-mcp-compat-overview a {
display: inline-block;
padding: 4px 0;
}
.lit-mcp-compat-actions .button {
min-height: 40px;
}
}
/* Tab "Protokoll": filters in their own block above the table (core hides ".tablenav .actions"
@@ -567,3 +637,7 @@
.lit-mcp-unit {
margin-left: 4px;
}
.lit-mcp-compat-versions th {
width: 30%;
}