1276 lines
23 KiB
CSS
1276 lines
23 KiB
CSS
/* ============================================================
|
|
APP.CSS — was nur Bifröst braucht, auf Basis der Framework-Tokens
|
|
Layout wie in Hugin (hugin.css), damit beide Anwendungen gleich aussehen.
|
|
============================================================ */
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hell: leicht getönter Seitengrund, damit sich weiße Karten abheben (dunkel hat die Stufen schon) */
|
|
:root[data-theme="light"] {
|
|
--bg: #f5f6f9;
|
|
--bg-subtle: #f0f1f5;
|
|
}
|
|
|
|
.card {
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
/* Seitentitel im Maßstab eines Arbeitswerkzeugs statt 3rem */
|
|
.aiw-main h1 {
|
|
font-size: var(--text-2xl);
|
|
letter-spacing: var(--tracking-tight);
|
|
line-height: var(--leading-tight);
|
|
}
|
|
|
|
.sidebar-nav a.active {
|
|
color: var(--text);
|
|
background: var(--bg-muted);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
/* Kleine Pillen für Metadaten (Zeit, Modell, Kontext, Regeln) */
|
|
.aiw-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-1) var(--space-2);
|
|
margin: 0;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.aiw-meta-who {
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text);
|
|
}
|
|
|
|
.aiw-pill {
|
|
padding: 1px var(--space-2);
|
|
border-radius: var(--radius-full);
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.aiw-pill-danger {
|
|
background: var(--color-danger-bg);
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
|
|
.aiw-main {
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
.aiw-single {
|
|
padding-block: var(--space-16);
|
|
}
|
|
|
|
/* Layout: Sidebar nur Navigation, Konto in der Topbar über dem Inhalt */
|
|
.aiw-layout {
|
|
gap: 0;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
.aiw-topbar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
height: var(--nav-height);
|
|
padding-inline: var(--space-6);
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.aiw-topbar-end {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.aiw-menu,
|
|
.aiw-topbar-brand {
|
|
display: none;
|
|
}
|
|
|
|
.aiw-topbar-brand {
|
|
font-weight: var(--weight-bold);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Pfad in der Topbar; der Workspace als Pille, damit der aktive Kontext immer sichtbar ist (→ Konzept 4.3) */
|
|
.aiw-crumbs {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.aiw-crumbs li > * {
|
|
max-width: 20rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.aiw-crumbs .aiw-crumb-plain {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-subtle);
|
|
}
|
|
|
|
.aiw-crumbs .aiw-crumb-ws {
|
|
display: block;
|
|
padding: 0.125rem var(--space-3);
|
|
border-radius: var(--radius-full);
|
|
background: var(--accent-muted);
|
|
color: var(--accent);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
|
|
.aiw-crumbs a.aiw-crumb-ws:hover {
|
|
background: var(--accent-subtle);
|
|
color: var(--accent-hover);
|
|
}
|
|
|
|
@media (min-width: 64.0625rem) {
|
|
.aiw-sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
height: 100dvh;
|
|
}
|
|
|
|
/* Seitenleiste ausgeblendet (Knopf in der Topbar): Inhalt volle Breite, Markenname in die Topbar */
|
|
[data-sidebar="collapsed"] .aiw-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
[data-sidebar="collapsed"] .aiw-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
[data-sidebar="collapsed"] .aiw-topbar-brand {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
/* Schmal blendet ☰ die Seitenleiste als Overlay ein; der Knopf zum Ausblenden gilt nur breit */
|
|
@media (max-width: 64rem) {
|
|
.aiw-sidebar-toggle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 64rem) {
|
|
.aiw-menu,
|
|
.aiw-topbar-brand {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.aiw-topbar {
|
|
padding-inline: var(--space-4);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.aiw-topbar-name {
|
|
display: none;
|
|
}
|
|
|
|
/* Schmal: Pfad statt Markenname, erste Stufe (Workspaces/Administration) weglassen */
|
|
.aiw-topbar:has(.aiw-crumbs) .aiw-topbar-brand,
|
|
.aiw-crumbs li:first-child:not(:last-child) {
|
|
display: none;
|
|
}
|
|
|
|
.aiw-crumbs li:nth-child(2)::before {
|
|
display: none;
|
|
}
|
|
|
|
.aiw-crumbs li > * {
|
|
max-width: 10rem;
|
|
}
|
|
|
|
.aiw-main {
|
|
padding: var(--space-4);
|
|
}
|
|
}
|
|
|
|
/* Chat */
|
|
/* Chat nutzt die volle Breite mit wenig Rand */
|
|
.aiw-main-wide {
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
|
|
.aiw-chat {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Fragen rechts als Blase, Antworten links */
|
|
#messages {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
#messages > .aiw-message-user {
|
|
align-self: flex-end;
|
|
max-width: min(52rem, 80%);
|
|
border-color: var(--border-strong);
|
|
border-radius: var(--radius-xl, 0.75rem) var(--radius-xl, 0.75rem) var(--radius-sm, 0.25rem) var(--radius-xl, 0.75rem);
|
|
}
|
|
|
|
#messages > .aiw-message-user .aiw-meta {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#messages > .aiw-message-assistant {
|
|
align-self: flex-start;
|
|
width: 100%;
|
|
max-width: min(80rem, 92%);
|
|
border-radius: var(--radius-xl, 0.75rem) var(--radius-xl, 0.75rem) var(--radius-xl, 0.75rem) var(--radius-sm, 0.25rem);
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.aiw-main-wide {
|
|
padding: var(--space-2);
|
|
}
|
|
|
|
#messages > .aiw-message-user,
|
|
#messages > .aiw-message-assistant {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.aiw-message {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Eingabe unten fixiert; der Verlauf darüber scrollt mit der Seite */
|
|
.aiw-composer {
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: var(--z-sticky);
|
|
margin-inline: calc(-1 * var(--space-4));
|
|
padding: var(--space-3) var(--space-4) var(--space-4);
|
|
background: var(--bg);
|
|
border-top: 1px solid var(--border);
|
|
box-shadow: 0 -0.5rem 1rem -0.75rem rgb(0 0 0 / 0.15);
|
|
}
|
|
|
|
.aiw-composer textarea {
|
|
width: 100%;
|
|
min-height: 3.5rem;
|
|
max-height: 40vh;
|
|
resize: vertical;
|
|
}
|
|
|
|
.aiw-composer-hint {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.aiw-command-suggest {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-raised);
|
|
max-height: 14rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.aiw-command-option {
|
|
padding: var(--space-1) var(--space-2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.aiw-command-option.active,
|
|
.aiw-command-option:hover {
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.aiw-command-name {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.aiw-command-hint {
|
|
padding: var(--space-1) var(--space-2);
|
|
}
|
|
|
|
.aiw-command-list {
|
|
margin: var(--space-1) 0 0;
|
|
padding-left: var(--space-4);
|
|
}
|
|
|
|
.aiw-plan-on {
|
|
border-color: var(--color-info);
|
|
color: var(--color-info);
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.aiw-composer {
|
|
margin-inline: calc(-1 * var(--space-2));
|
|
padding-inline: var(--space-2);
|
|
}
|
|
|
|
.aiw-composer-hint {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.aiw-tools {
|
|
margin: 0;
|
|
padding-left: var(--space-5);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.aiw-tools [data-status="error"],
|
|
.aiw-tools [data-status="denied"] {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.aiw-break {
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Freigaben: echter Diff (→ Konzept 10.4) */
|
|
.aiw-diff {
|
|
max-height: 32rem;
|
|
overflow: auto;
|
|
padding: var(--space-3);
|
|
background: var(--surface-muted, var(--surface));
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
white-space: pre;
|
|
}
|
|
|
|
.aiw-diff-add {
|
|
color: var(--success, #15803d);
|
|
}
|
|
|
|
.aiw-diff-del {
|
|
color: var(--error, #b91c1c);
|
|
}
|
|
|
|
.aiw-diff-hunk {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.aiw-model-note {
|
|
padding-left: var(--space-3);
|
|
border-left: 3px solid var(--border);
|
|
}
|
|
|
|
.aiw-facts {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: var(--space-2) var(--space-4);
|
|
}
|
|
|
|
.aiw-facts dd {
|
|
margin: 0;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.aiw-facts {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.aiw-facts dt {
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
}
|
|
|
|
/* Chat umbenennen/löschen: Aufklappmenü rechts neben dem Titel */
|
|
.aiw-chat-actions[open] > div {
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* Gerenderte Modellantworten (→ Konzept 4.5); während des Streamings Rohtext (.aiw-message) */
|
|
.aiw-markdown {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.aiw-markdown > * + * {
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.aiw-markdown ul,
|
|
.aiw-markdown ol {
|
|
padding-left: var(--space-6);
|
|
}
|
|
|
|
.aiw-markdown li + li {
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.aiw-markdown pre {
|
|
overflow-x: auto;
|
|
padding: var(--space-3);
|
|
background: var(--surface-muted, var(--surface));
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
}
|
|
|
|
.aiw-markdown blockquote {
|
|
padding-left: var(--space-3);
|
|
border-left: 3px solid var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.aiw-markdown table {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border-collapse: collapse;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.aiw-markdown th,
|
|
.aiw-markdown td {
|
|
padding: var(--space-1) var(--space-3);
|
|
border: 1px solid var(--border);
|
|
text-align: left;
|
|
}
|
|
|
|
.aiw-markdown pre {
|
|
background: var(--bg-subtle);
|
|
}
|
|
|
|
.aiw-markdown :not(pre) > code {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Antworten und Notizen: Fließtext auf Lesebreite, Überschriften im Maßstab des Texts
|
|
(die Hilfe behält ihre eigenen Größen) */
|
|
.aiw-markdown:not(.aiw-help-text) {
|
|
line-height: var(--leading-relaxed);
|
|
}
|
|
|
|
.aiw-markdown:not(.aiw-help-text) > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
|
|
max-width: 72ch;
|
|
}
|
|
|
|
.aiw-markdown:not(.aiw-help-text) :is(h1, h2, h3, h4, h5, h6) {
|
|
font-weight: var(--weight-semibold);
|
|
line-height: var(--leading-snug);
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.aiw-markdown:not(.aiw-help-text) h1 {
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.aiw-markdown:not(.aiw-help-text) h2 {
|
|
font-size: var(--text-md);
|
|
}
|
|
|
|
.aiw-markdown:not(.aiw-help-text) :is(h3, h4, h5, h6) {
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
.aiw-markdown:not(.aiw-help-text) > :is(h1, h2, h3) {
|
|
margin-top: var(--space-6);
|
|
}
|
|
|
|
.aiw-markdown:not(.aiw-help-text) > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.aiw-image,
|
|
.aiw-link-target {
|
|
color: var(--text-muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* Audit-Log und Übersichten */
|
|
.aiw-filters label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.aiw-filters {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.aiw-nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aiw-kv {
|
|
display: inline-block;
|
|
margin-right: var(--space-3);
|
|
}
|
|
|
|
.aiw-number {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aiw-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
/* Seitenkopf: Titel links, Aktionen rechts; bricht auf schmalen Bildschirmen um */
|
|
.aiw-page-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.aiw-card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.aiw-ws-card {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.aiw-ws-meta {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.aiw-clamp {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Zwei Spalten (Quellen und Dateien), auf schmalen Bildschirmen untereinander */
|
|
.aiw-columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
|
|
gap: var(--space-6);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.aiw-columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Erste Schritte */
|
|
.aiw-steps {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
margin: 0;
|
|
padding-left: var(--space-6);
|
|
}
|
|
|
|
.aiw-steps li.done {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.aiw-steps li.done strong::after {
|
|
content: " ✓";
|
|
color: var(--color-success, var(--success));
|
|
}
|
|
|
|
/* Chat-Liste der Übersicht */
|
|
.aiw-search {
|
|
min-width: 16rem;
|
|
}
|
|
|
|
.aiw-chat-list,
|
|
.aiw-file-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.aiw-chat-list li + li,
|
|
.aiw-file-list li + li {
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.aiw-chat-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
padding: var(--space-3) var(--space-2);
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.aiw-chat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.aiw-chat-item .aiw-chat-link {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.aiw-chat-delete {
|
|
flex: none;
|
|
}
|
|
|
|
.aiw-chat-link:hover {
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.aiw-chat-title {
|
|
font-weight: var(--weight-medium);
|
|
color: var(--text);
|
|
}
|
|
|
|
.aiw-chat-link:hover .aiw-chat-title {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.aiw-snippet {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.aiw-file-list li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) 0;
|
|
}
|
|
|
|
/* Aufklappmenü ohne JavaScript (details/summary) */
|
|
.aiw-menu-details {
|
|
position: relative;
|
|
}
|
|
|
|
.aiw-menu-details > summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.aiw-menu-details > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.aiw-menu-panel {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + var(--space-1));
|
|
z-index: var(--z-dropdown, 20);
|
|
min-width: 14rem;
|
|
padding: var(--space-1) 0;
|
|
background: var(--surface-overlay, var(--surface));
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg, 0.5rem);
|
|
box-shadow: var(--shadow-lg, 0 8px 24px rgb(0 0 0 / 12%));
|
|
}
|
|
|
|
/* Seitenleiste: lange Chat-Titel einzeilig */
|
|
.aiw-nav-chat {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aiw-form {
|
|
max-width: 40rem;
|
|
}
|
|
|
|
.aiw-form textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.aiw-danger-zone {
|
|
border-color: var(--color-danger, var(--error, #b91c1c));
|
|
}
|
|
|
|
/* Diagramme zu Abfrageergebnissen (app/core/charts.py); Farben: erste drei Kategorie-Farben,
|
|
für den dunklen Hintergrund eigene Stufen */
|
|
.aiw-chart {
|
|
--series-0: #2a78d6;
|
|
--series-1: #eb6834;
|
|
--series-2: #1baf7a;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:where(:not([data-theme="light"])) .aiw-chart {
|
|
--series-0: #3987e5;
|
|
--series-1: #d95926;
|
|
--series-2: #199e70;
|
|
}
|
|
}
|
|
|
|
:root[data-theme="dark"] .aiw-chart {
|
|
--series-0: #3987e5;
|
|
--series-1: #d95926;
|
|
--series-2: #199e70;
|
|
}
|
|
|
|
.aiw-chart-svg {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 40rem;
|
|
height: auto;
|
|
}
|
|
|
|
.aiw-chart-svg text {
|
|
font-size: 12px;
|
|
fill: var(--text-muted);
|
|
}
|
|
|
|
.aiw-chart-svg .aiw-chart-value {
|
|
fill: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.aiw-chart-axis,
|
|
.aiw-chart-grid {
|
|
stroke: var(--border);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.aiw-chart-line {
|
|
fill: none;
|
|
stroke-width: 2;
|
|
stroke-linejoin: round;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.aiw-chart-dot {
|
|
stroke: var(--surface);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.aiw-chart-bar.aiw-chart-s0, .aiw-chart-dot.aiw-chart-s0, .aiw-chart-key.aiw-chart-s0 { fill: var(--series-0); background: var(--series-0); }
|
|
.aiw-chart-bar.aiw-chart-s1, .aiw-chart-dot.aiw-chart-s1, .aiw-chart-key.aiw-chart-s1 { fill: var(--series-1); background: var(--series-1); }
|
|
.aiw-chart-bar.aiw-chart-s2, .aiw-chart-dot.aiw-chart-s2, .aiw-chart-key.aiw-chart-s2 { fill: var(--series-2); background: var(--series-2); }
|
|
.aiw-chart-line.aiw-chart-s0 { stroke: var(--series-0); }
|
|
.aiw-chart-line.aiw-chart-s1 { stroke: var(--series-1); }
|
|
.aiw-chart-line.aiw-chart-s2 { stroke: var(--series-2); }
|
|
|
|
.aiw-chart-bar:hover,
|
|
.aiw-chart-dot:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.aiw-chart-legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
margin: var(--space-2) 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.aiw-chart-legend li {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.aiw-chart-key {
|
|
display: inline-block;
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Ergebnis einer Abfrage unter der Antwort */
|
|
.aiw-result {
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-subtle);
|
|
}
|
|
|
|
.aiw-result > summary {
|
|
cursor: pointer;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.aiw-result-table {
|
|
max-height: 22rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
.aiw-result-table td,
|
|
.aiw-result-table th {
|
|
font-size: var(--text-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aiw-message-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* Beispielfragen: Übersicht und leerer Chat */
|
|
.aiw-examples {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
|
gap: var(--space-2);
|
|
}
|
|
.aiw-examples form {
|
|
height: 100%;
|
|
}
|
|
.aiw-example {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: left;
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: inherit;
|
|
font: inherit;
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
}
|
|
.aiw-example:hover,
|
|
.aiw-example:focus-visible {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Rückmeldung zu einer Antwort: rechts neben „Kopieren“, Kommentar darunter */
|
|
.aiw-feedback {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-left: auto;
|
|
}
|
|
.aiw-feedback-rate,
|
|
.aiw-feedback-comment {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
.aiw-feedback-comment input {
|
|
width: 18rem;
|
|
max-width: 60vw;
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.aiw-feedback-on {
|
|
background: var(--bg-muted);
|
|
border-color: var(--border);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.aiw-feedback-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.aiw-feedback-list li {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
align-items: flex-start;
|
|
}
|
|
.aiw-feedback-mark {
|
|
flex: none;
|
|
}
|
|
|
|
/* Übersicht: welche Daten bereitstehen, eine Zeile */
|
|
.aiw-context-line {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Kopf der Chat-Liste: Titel, Suche und „Neuer Chat“ in einer Zeile */
|
|
.aiw-chats-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.aiw-chats-head h2 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aiw-chats-head > form:last-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.aiw-search-form {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
max-width: 28rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.aiw-search-form input {
|
|
width: 100%;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.aiw-search-form .btn {
|
|
position: absolute;
|
|
right: var(--space-1);
|
|
}
|
|
|
|
.aiw-search-icon {
|
|
position: absolute;
|
|
left: 0.625rem;
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.aiw-chat-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-3);
|
|
min-width: 0;
|
|
}
|
|
|
|
.aiw-chat-row .aiw-chat-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aiw-chat-meta {
|
|
flex: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.aiw-chats-head {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.aiw-search-form {
|
|
order: 3;
|
|
flex-basis: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.aiw-chat-row {
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.aiw-chat-row .aiw-chat-title {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
/* Speicherkontingent im Kopf von „Dateien zur Analyse“ */
|
|
.aiw-storage-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2) var(--space-4);
|
|
}
|
|
|
|
.aiw-storage {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.aiw-storage meter {
|
|
width: 8rem;
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.aiw-input-narrow {
|
|
width: 9rem;
|
|
}
|
|
|
|
/* Ansicht „Änderungen“ im Chat */
|
|
.aiw-changes {
|
|
border-left: 3px solid var(--accent);
|
|
}
|
|
|
|
.aiw-changes-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
gap: var(--space-2) var(--space-4);
|
|
}
|
|
|
|
.aiw-plan-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.aiw-plan-list li {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.aiw-plan-done > span:nth-child(2) {
|
|
color: var(--text-muted);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.aiw-plan-in_progress > span:nth-child(2) {
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.aiw-commit-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.aiw-changes-detail .aiw-diff {
|
|
max-height: 32rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
.aiw-pr-form[open] > form {
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.aiw-commit-warnings {
|
|
margin: var(--space-1) 0 0;
|
|
padding-left: var(--space-5);
|
|
}
|
|
|
|
/* Online-Hilfe */
|
|
.aiw-help-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.aiw-help {
|
|
display: grid;
|
|
grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
|
|
gap: var(--space-8);
|
|
align-items: start;
|
|
}
|
|
|
|
.aiw-help-nav {
|
|
position: sticky;
|
|
top: 4.5rem;
|
|
max-height: calc(100dvh - 6rem);
|
|
overflow: auto;
|
|
}
|
|
|
|
.aiw-help-search input {
|
|
width: 100%;
|
|
}
|
|
|
|
.aiw-help-pages,
|
|
.aiw-help-toc,
|
|
.aiw-help-hits {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.aiw-help-pages > li > a {
|
|
display: block;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.aiw-help-pages > li > a.active,
|
|
.aiw-help-pages > li > a:hover {
|
|
background: var(--bg-muted);
|
|
}
|
|
|
|
.aiw-help-pages > li > a.active {
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.aiw-help-toc {
|
|
margin: var(--space-1) 0 var(--space-2) var(--space-3);
|
|
border-left: 1px solid var(--border);
|
|
}
|
|
|
|
.aiw-help-toc a {
|
|
display: block;
|
|
padding: 0.125rem var(--space-2);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.aiw-help-toc a:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.aiw-help-main {
|
|
max-width: 52rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.aiw-help-text h2 {
|
|
margin-top: var(--space-8);
|
|
padding-top: var(--space-2);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.aiw-help-text h2,
|
|
.aiw-help-text h3 {
|
|
scroll-margin-top: 4.5rem;
|
|
}
|
|
|
|
.aiw-help-next {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.aiw-help-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.aiw-help-card {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.aiw-help-card:hover {
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
.aiw-help-mine {
|
|
border-color: var(--color-info-border);
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.aiw-help {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.aiw-help-nav {
|
|
position: static;
|
|
max-height: none;
|
|
}
|
|
|
|
.aiw-help-toc {
|
|
display: none;
|
|
}
|
|
|
|
.aiw-help-link span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Übersicht „Repository“ */
|
|
.aiw-commit-list,
|
|
.aiw-commit-files {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.aiw-commit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) 0;
|
|
}
|
|
|
|
.aiw-commit + .aiw-commit {
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.aiw-commit-main {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
min-width: 0;
|
|
}
|
|
|
|
.aiw-commit-subject {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.aiw-commit-files li {
|
|
padding: var(--space-1) 0;
|
|
}
|
|
|
|
.aiw-repo-filter input,
|
|
.aiw-repo-period {
|
|
width: auto;
|
|
max-width: 14rem;
|
|
}
|
|
|
|
.aiw-repo-ref {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.aiw-tree {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.aiw-tree li {
|
|
padding: var(--space-1) 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.aiw-code {
|
|
margin: 0;
|
|
padding: var(--space-2) 0 var(--space-2) 4.5em;
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
background: var(--bg-muted);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.aiw-code li {
|
|
padding-right: var(--space-2);
|
|
white-space: pre;
|
|
}
|
|
|
|
.aiw-code li::marker {
|
|
color: var(--text-muted);
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.aiw-commit {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|