Files
WP-LIT-MCP/assets/css/admin.css
T
Jan-Niclas LoosenandClaude Fable 5.1 1b73f0652a fix: Admin-UX aus dem Review – Live-Gruppenfeedback, Protokollfilter, Divi-Hinweis, Rollen-Rückfrage
- Tools: „Ganze Gruppe“ und „Nur lesen“ wirken sofort auf die Zeilen
  (Option „wie Gruppe (…)“, gesperrte Selects mit Hinweis), der Server
  bleibt die Wahrheit; Markup trägt die nötigen data-Attribute.
- Protokoll: Filter in eigenem Block über der Tabelle (Core blendet
  .tablenav .actions auf Telefonen aus); „Protokoll leeren“ nur bei
  Einträgen, rechtsbündig, mit Gesamtzahl über ChangeLog::count().
- Divi: Beschreibung unter „Prüfung starten“, Button primär solange
  ungetestet ohne frischen Bericht.
- Zugriff: Rückfrage vor dem Speichern ohne Rolle oder ohne eigene Rolle.
- Verbindung: HTTPS-Hinweis nicht doppelt neben der Statusliste.
- Mobil: breitere Einstellungs-Spalte im Tools-Reiter.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-10-08 16:39:44 +02:00

386 lines
6.5 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* Einstellungen → LIT MCP. Only small additions to WordPress' own admin styles. */
/* Header: title left, logo right; wraps instead of overlapping on narrow screens. */
.lit-mcp-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
}
.lit-mcp-logo {
display: block;
height: 30px;
width: auto;
}
@media screen and (max-width: 782px) {
.lit-mcp-logo {
height: 22px;
}
}
.lit-mcp .nav-tab-wrapper {
margin-bottom: 1em;
}
/* Muted secondary text (tool names, client URLs). */
.lit-mcp-muted,
.lit-mcp-tool-name {
color: #646970;
font-size: 12px;
overflow-wrap: anywhere;
}
.lit-mcp-tool-name {
font-family: Consolas, Monaco, monospace;
}
/* Tab "Verbindung". */
.lit-mcp-steps {
max-width: 50rem;
}
.lit-mcp-steps li {
margin-bottom: 0.75em;
}
.lit-mcp-copy-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin-top: 6px;
}
.lit-mcp-copy-row input.large-text {
flex: 1 1 22rem;
width: auto;
}
.lit-mcp-copy-row .success {
color: #007017;
}
.lit-mcp-status {
margin: 0 0 1em;
}
.lit-mcp-status li {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 6px;
margin-bottom: 8px;
}
.lit-mcp-status .dashicons {
align-self: center;
}
.lit-mcp-status-detail {
color: #50575e;
}
.lit-mcp-status-yes-alt .dashicons,
.lit-mcp-result-yes-alt .dashicons {
color: #00a32a;
}
.lit-mcp-status-warning .dashicons,
.lit-mcp-result-warning .dashicons {
color: #dba617;
}
.lit-mcp-status-dismiss .dashicons,
.lit-mcp-result-dismiss .dashicons {
color: #d63638;
}
/* Tab "Zugriff". */
.lit-mcp-connections + .description {
margin-top: 8px;
}
.lit-mcp-connections .column-actions {
width: 8em;
text-align: right;
}
@media screen and (max-width: 782px) {
.lit-mcp-connections .column-created {
display: none;
}
.lit-mcp-connections .column-actions {
width: auto;
}
.lit-mcp-copy-row input.large-text {
font-size: 13px;
}
}
/* Tab "Tools": legend, collapsible groups (WordPress postboxes) with aligned columns. */
.lit-mcp-legend {
display: grid;
grid-template-columns: max-content 1fr;
gap: 2px 12px;
margin: 1em 0;
}
.lit-mcp-legend dt {
font-weight: 600;
}
.lit-mcp-legend dd {
margin: 0;
}
.lit-mcp-groups .postbox-header {
flex-wrap: wrap;
gap: 0 12px;
padding-left: 12px;
}
.lit-mcp-groups .postbox .hndle {
cursor: pointer;
justify-content: flex-start;
gap: 6px;
padding: 8px 0;
margin: 0;
font-size: 14px;
line-height: 1.4;
}
.lit-mcp-groups .hndle .count {
color: #646970;
font-weight: 400;
}
.lit-mcp-group-summary {
color: #646970;
font-size: 13px;
font-weight: 400;
}
.lit-mcp-group-summary::before {
content: "– ";
}
.lit-mcp-groups .postbox:not(.closed) .lit-mcp-group-summary {
display: none;
}
.lit-mcp-group-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 16px;
padding: 6px 0;
}
.lit-mcp-group-controls .description {
font-style: italic;
}
.lit-mcp-groups .handle-actions {
padding-right: 6px;
}
/* Same arrow indicator as WordPress' own meta boxes (core scopes it to .meta-box-sortables). */
.lit-mcp-groups .postbox .toggle-indicator::before {
content: "\f142";
content: "\f142" / '';
display: inline-block;
font: normal 20px/1 dashicons;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
}
.lit-mcp-groups .postbox.closed .toggle-indicator::before {
content: "\f140";
content: "\f140" / '';
}
.lit-mcp-groups .postbox .inside {
margin: 0;
padding: 0;
}
.lit-mcp-tools-table {
table-layout: fixed;
border: 0;
box-shadow: none;
}
.lit-mcp-tools-table .column-tool {
width: 55%;
}
.lit-mcp-tools-table .column-kind {
width: 15%;
}
.lit-mcp-tools-table .column-mode {
width: 30%;
}
.lit-mcp-tools-table td {
vertical-align: middle;
}
.lit-mcp-tools-table select {
max-width: 100%;
}
.lit-mcp-tools-table .description {
margin: 4px 0 0;
}
.lit-mcp-kind {
color: #50575e;
white-space: nowrap;
}
.lit-mcp-kind .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
vertical-align: text-bottom;
color: #787c82;
}
@media screen and (max-width: 782px) {
.lit-mcp-group-controls {
order: 3;
flex-basis: 100%;
padding-bottom: 10px;
}
/* Room for "Standard (indirekt)" in the select on phones. */
.lit-mcp-tools-table .column-tool {
width: 40%;
}
.lit-mcp-tools-table .column-kind {
width: 10%;
}
.lit-mcp-tools-table .column-mode {
width: 50%;
}
.lit-mcp-tools-table th,
.lit-mcp-tools-table td {
padding-left: 6px;
padding-right: 6px;
}
/* Icon only on phones; the word stays for screen readers (and as tooltip-free fallback). */
.lit-mcp-kind-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.lit-mcp-tools-table select {
width: 100%;
font-size: 14px;
padding-right: 20px;
background-position: right 2px top 55%;
}
}
/* Tab "Protokoll": filters in their own block above the table (core hides ".tablenav .actions"
on phones); a core-style list table whose change is the wide primary column. */
.lit-mcp-log-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin: 8px 0;
}
.lit-mcp-log-filters select {
max-width: 14rem;
}
.lit-mcp-date {
display: flex;
align-items: center;
gap: 4px;
}
.lit-mcp-log-filters .lit-mcp-reset {
line-height: 2.30769231;
}
/* "Protokoll leeren": a destructive action, kept apart from the data it removes. */
.lit-mcp-clear-log {
margin-top: 1em;
text-align: right;
}
.lit-mcp .lit_mcp_log_entries .column-object {
width: 24%;
}
.lit-mcp .lit_mcp_log_entries .column-user {
width: 12em;
}
.lit-mcp .lit_mcp_log_entries .column-created_at {
width: 11em;
}
.lit-mcp .lit_mcp_log_entries .column-object,
.lit-mcp .lit_mcp_log_entries .column-user .lit-mcp-muted {
overflow-wrap: anywhere;
}
.lit-mcp-summary {
margin-bottom: 2px;
}
/* Non-ok results: a notice-coloured badge and a marked row (like core's unapproved comments);
#the-list beats core's "no shadow on the last row". */
.lit-mcp-badge {
display: inline-block;
padding: 0 6px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
line-height: 1.7;
}
.lit-mcp-badge-warning {
background: #fcf9e8;
color: #614a19;
box-shadow: inset 0 0 0 1px #dba617;
}
.lit-mcp-badge-error {
background: #fcf0f1;
color: #8a2424;
box-shadow: inset 0 0 0 1px #d63638;
}
.lit-mcp #the-list tr.lit-mcp-row-warning > :first-child {
box-shadow: inset 4px 0 0 #dba617;
}
.lit-mcp #the-list tr.lit-mcp-row-error > :first-child {
box-shadow: inset 4px 0 0 #d63638;
}
/* Tab "Limits". */
.lit-mcp-unit {
margin-left: 4px;
}