diff --git a/plugins/llm-security/playground/llm-security-playground.html b/plugins/llm-security/playground/llm-security-playground.html index 807bc4a..36d7d36 100644 --- a/plugins/llm-security/playground/llm-security-playground.html +++ b/plugins/llm-security/playground/llm-security-playground.html @@ -78,6 +78,55 @@ .command-cards { display: flex; flex-direction: column; gap: var(--space-4); } .sub-zone { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-3); } .sub-zone__heading { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); margin: 0 0 var(--space-2); } + + /* Collapsible command sub-cards (Rapporter-tab) */ + .command-subcard { padding: 0; overflow: hidden; } + .command-subcard .card__head--toggle { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-3); + width: 100%; + margin: 0; + padding: var(--space-4) var(--space-5); + background: transparent; + border: 0; + cursor: pointer; + text-align: left; + font-family: inherit; + color: inherit; + } + .command-subcard .card__head--toggle:hover { background: var(--color-bg-soft); } + .command-subcard .card__head--toggle:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: -2px; } + .command-subcard .card__head-text { flex: 1; min-width: 0; } + .command-subcard .card__head-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; } + .command-subcard .subcard-chev { + display: inline-block; + font-size: 0.875rem; + color: var(--color-text-tertiary); + transform: rotate(-90deg); + transition: transform 0.15s ease; + align-self: center; + flex-shrink: 0; + width: 1em; + text-align: center; + } + .command-subcard .card__head--toggle[aria-expanded="true"] .subcard-chev { transform: rotate(0deg); } + .command-subcard .subcard-body { + padding: 0 var(--space-5) var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-3); + } + + /* App header — split nav groups */ + .app-header__nav-group { display: flex; align-items: center; gap: var(--space-2); } + .app-header__nav-sep { + width: 1px; + align-self: stretch; + background: var(--color-border-subtle); + margin: 0 var(--space-2); + } .paste-import-row { display: flex; flex-direction: column; gap: var(--space-2); } .paste-import-row__actions { display: flex; gap: var(--space-2); align-items: center; } .form-zone-placeholder { padding: var(--space-3); background: var(--color-bg-soft); border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-text-tertiary); font-style: italic; } @@ -6532,15 +6581,20 @@ breadcrumbHtml + '
' + '