/* Farben und Farbmodi unverändert aus dem SeKo-Mailer (seko_mailer/static/app.css), damit beide Apps gleich aussehen. Änderungen an der Palette dort und hier gleich machen. */ /* Farben: Corporate Design der RWTH Aachen, Originalwerte der Hausfarben. * * Zwei Hausfarben sind als Textfarbe unbrauchbar: Grün 100 kommt auf Weiß nur auf * 2,9:1, Orange 100 auf 2,0:1 – beide weit unter den 4,5:1, die lesbarer Text braucht. * Statt sie abzudunkeln und damit die Palette zu verlassen, dienen sie hier als Fläche * und werden mit einer dunklen Hausfarbe gepaart: Petrol auf Grün für Erfolg, Schwarz * auf Orange für Warnungen. * * Die Regeln weiter unten benutzen nur die Bedeutungsfarben (--card, --accent, --err-soft …), * nie eine Hausfarbe oder #fff direkt. Die vier Farbmodi setzen dann nur diese Variablen: * data-mode="dark" am für dunkel, data-accent="pink" für RWTH Magenta statt Blau. * Gesetzt werden beide von theme.js, bevor die Seite gezeichnet wird. */ :root { --rwth-blau-100:#00549F; --rwth-blau-25:#C7DDF2; --rwth-blau-10:#E8F1FA; --rwth-schwarz-100:#000000; --rwth-schwarz-75:#646567; --rwth-schwarz-25:#CFD1D2; --rwth-schwarz-10:#ECEDED; --rwth-petrol-100:#006165; --rwth-gruen-25:#DDEBCE; --rwth-gruen-10:#F2F7EC; --rwth-orange-100:#F6A800; --rwth-orange-25:#FEEAC9; --rwth-orange-10:#FFF7EA; --rwth-rot-100:#CC071E; --rwth-rot-10:#FAEBE3; --rwth-magenta-100:#E30066; /* Flächen und Text */ --bg:var(--rwth-schwarz-10); /* Seite */ --card:#fff; /* Karten, Kopfzeile, Eingabefelder */ --sunken:var(--rwth-schwarz-10); /* vertieft in einer Karte: Vorschau, Zitat, Codeblock */ --text:var(--rwth-schwarz-100); --muted:var(--rwth-schwarz-75); --line:var(--rwth-schwarz-25); /* Akzent: --accent als Fläche (Knöpfe), --accent-text für Links und Schrift */ --accent:var(--rwth-blau-100); --accent-text:var(--rwth-blau-100); --on-accent:#fff; --accent-soft:var(--rwth-blau-10); --accent-soft-2:var(--rwth-blau-25); --accent-shadow:rgba(0,84,159,.15); /* Bedeutungsfarben: bleiben in jedem Akzent dieselben, Fehler ist nie pink */ --ok:var(--rwth-petrol-100); --ok-soft:var(--rwth-gruen-10); --ok-badge:var(--rwth-gruen-25); --err:var(--rwth-rot-100); --err-soft:var(--rwth-rot-10); --err-solid:var(--rwth-rot-100); --on-err:#fff; --warn-soft:var(--rwth-orange-10); --warn-badge:var(--rwth-orange-25); --neutral-badge:var(--rwth-schwarz-25); --backdrop:rgba(0,0,0,.35); } /* Pink: RWTH Magenta als Akzent. Weiß auf Magenta 4,6:1; als Schrift das etwas dunklere #C4005A (5,8:1 auf Weiß), weil Magenta 100 für kleine Schrift knapp wäre. */ :root[data-accent="pink"] { --bg:#FCEEF4; --sunken:#FCEEF4; --text:#2A0F1C; --muted:#8A5570; --line:#F2CFDF; --accent:var(--rwth-magenta-100); --accent-text:#C4005A; --accent-soft:#FDE3EE; --accent-soft-2:#F7B9D3; --accent-shadow:rgba(227,0,102,.15); } /* Dunkel. Das RWTH-Blau 100 wäre auf dunklem Grund kaum zu sehen: als Fläche ein helleres Blau (#3372B0, Weiß darauf 5,0:1), als Schrift Blau 50 (#8EBAE5). Die Bedeutungsfarben bekommen eigene Stufen, damit Grün, Rot und Orange auch im Dunkeln lesbar bleiben. */ :root[data-mode="dark"] { color-scheme:dark; /* Bildlaufleisten, Datumsauswahl usw. ebenfalls dunkel */ --bg:#0E1117; --card:#161B22; --sunken:#0E1117; --text:#E6EDF3; --muted:#8B949E; --line:#2A313C; --accent:#3372B0; --accent-text:#8EBAE5; --accent-soft:#16304D; --accent-soft-2:#24476E; --accent-shadow:rgba(0,0,0,.4); --ok:#7FD1B9; --ok-soft:#10302A; --ok-badge:#12352F; --err:#F28B82; --err-soft:#3A1518; --err-solid:var(--rwth-rot-100); --warn-soft:#33260F; --warn-badge:#4A3510; --neutral-badge:#2A313C; } :root[data-mode="dark"][data-accent="pink"] { --bg:#170C12; --card:#221119; --sunken:#170C12; --text:#F5E6EE; --muted:#B8909F; --line:#3D2331; --accent:var(--rwth-magenta-100); --accent-text:#FF5FA2; --accent-soft:#3F1128; --accent-soft-2:#5E1A3C; } /* --- Grundgerüst, wie im SeKo-Mailer ------------------------------------------------------- */ * { box-sizing:border-box; } /* hidden gewinnt immer – sonst hebt jede Klasse mit display:flex es auf (so bei der leeren Bildvorschau über dem Eingabefeld, 28.09.2026) */ [hidden] { display:none !important; } body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); } header { background:var(--card); border-bottom:1px solid var(--line); padding:10px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } header h1 { font-size:18px; margin:0; line-height:0; } header h1 a { text-decoration:none; color:inherit; } /* Orange nur als Linie des Symbols, nie als Textfarbe: Orange 100 kommt auf Weiß nur auf 2,0:1 */ header h1 a.brand { display:flex; align-items:center; gap:8px; line-height:1; } .brand-mark { width:30px; height:30px; stroke:var(--rwth-orange-100); flex:none; } .brand span { font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--text); } header nav { display:flex; gap:4px; } header nav a { padding:6px 10px; border-radius:6px; text-decoration:none; color:var(--muted); font-weight:600; white-space:nowrap; } header nav a:hover { color:var(--text); background:var(--sunken); } header nav a.active { color:var(--accent-text); background:var(--accent-soft); } header nav a.logout { margin-left:8px; font-weight:500; } header .spacer { flex:1; } header .status { font-size:13px; color:var(--muted); } main { max-width:960px; margin:24px auto; padding:0 24px; } .card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:20px; } h2 { margin:0 0 12px; font-size:17px; } label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; } input[type=text], input[type=password], input[type=search], input[type=number], select, textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; background:var(--card); color:var(--text); } button { padding:8px 14px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); border-radius:6px; font:inherit; cursor:pointer; } button.secondary { background:var(--card); color:var(--accent-text); } button:disabled { opacity:.5; cursor:default; } .actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center; } .msg { padding:10px 14px; border-radius:6px; margin:10px 0; font-size:14px; } .msg.err { background:var(--err-soft); color:var(--err); } .msg.ok { background:var(--ok-soft); color:var(--ok); } .msg.warn { background:var(--warn-soft); color:var(--text); } .hint { font-size:13px; color:var(--muted); } a { color:var(--accent-text); } .card-login { max-width:420px; margin:60px auto; } .card-login p.hint { margin:0 0 6px; } /* Farbmodi: zwei unabhängige Schalter oben rechts. Aus: Fläche der Karte, Symbol in der Akzentfarbe. An: ganz in der Akzentfarbe, Symbol weiß. */ .modes { display:flex; gap:8px; } .mode-toggle { width:38px; height:38px; padding:0; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--accent-text); display:inline-flex; align-items:center; justify-content:center; } .mode-toggle svg { width:18px; height:18px; fill:currentColor; } .mode-toggle[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); } /* --- Suche ----------------------------------------------------------------------------------- */ .search-card { padding:24px; } .search-row { display:flex; gap:10px; } .search-row input[type=search] { flex:1; font-size:17px; padding:11px 14px; border-radius:8px; } .search-row input[type=search]:focus { outline:2px solid var(--accent-soft-2); border-color:var(--accent); } .search-row button { padding:0 22px; border-radius:8px; font-weight:600; } .filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; font-size:14px; } .filters .hint { margin-right:4px; } /* Quellen als Schalter-Chips statt nackter Häkchen; das Häkchen bleibt für Tastatur und Screenreader */ .source-toggle { display:inline-flex; align-items:center; gap:6px; margin:0; padding:4px 12px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-size:14px; cursor:pointer; background:var(--card); } .source-toggle input { margin:0; accent-color:var(--accent); } .source-toggle:has(input:checked) { background:var(--accent-soft); border-color:var(--accent-soft-2); color:var(--accent-text); } .examples { margin-top:14px; font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .example { background:var(--sunken); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:13px; } .example:hover { border-color:var(--accent); color:var(--accent-text); } .result-meta { font-size:13px; color:var(--muted); margin:0 2px 10px; } .hit { padding:18px 20px; margin-bottom:12px; } .hit-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-bottom:4px; } .crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; min-width:0; } .crumbs span + span::before { content:"›"; margin-right:6px; color:var(--line); } .badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--accent-soft); color:var(--accent-text); white-space:nowrap; } .badge.public { background:var(--ok-badge); color:var(--ok); } .hit h2 { margin:2px 0 2px; font-size:18px; line-height:1.35; } .hit h2 a { text-decoration:none; } .hit h2 a:hover { text-decoration:underline; } .hit h2 .ext { width:14px; height:14px; margin-left:5px; vertical-align:-1px; stroke:currentColor; fill:none; } .title-en { font-size:13px; color:var(--muted); margin:0 0 6px; } .snippet { margin:8px 0 0; color:var(--text); } /* Die Texte enthalten lange URLs ohne Leerzeichen; ohne Umbruch drücken sie auf dem Handy die ganze Seite in die Breite */ .snippet, .fulltext, .part p, .hit h2, .title-en { overflow-wrap:anywhere; } mark { background:var(--warn-badge); color:inherit; border-radius:2px; padding:0 1px; } .hit-foot { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin-top:10px; font-size:13px; color:var(--muted); } .rank-info { font-size:12px; color:var(--muted); white-space:nowrap; } .nowrap { white-space:nowrap; } .score { display:inline-flex; align-items:center; gap:6px; } .score-bar { display:inline-block; width:48px; height:5px; border-radius:3px; background:var(--line); overflow:hidden; } .score-bar i { display:block; height:100%; background:var(--accent); } details.more { font-size:14px; } details.more > summary { cursor:pointer; color:var(--accent-text); font-size:13px; list-style:none; } details.more > summary::-webkit-details-marker { display:none; } details.more > summary::before { content:"▸ "; } details.more[open] > summary::before { content:"▾ "; } .fulltext { white-space:pre-wrap; background:var(--sunken); padding:12px 14px; border-radius:6px; font-size:14px; margin:8px 0 0; max-height:480px; overflow:auto; } .part { border-left:3px solid var(--accent-soft-2); padding:2px 0 2px 12px; margin:10px 0; } .part b { font-size:13px; color:var(--muted); font-weight:600; } .part p { margin:4px 0; } .load-more { display:block; margin:6px auto 30px; } .empty-state { text-align:center; color:var(--muted); padding:30px 10px; } .empty-state .examples { justify-content:center; } @media (max-width:640px) { /* Kopfzeile in einer Reihe: Die Zahl der Abschnitte ist hier verzichtbar */ header { padding:8px 12px; gap:10px; flex-wrap:nowrap; } header .status { display:none; } header nav { gap:0; overflow-x:auto; } header nav a { padding:6px 7px; } header nav a.logout { margin-left:0; } header h1 span { display:none; } .mode-toggle { width:34px; height:34px; } main { padding:0 12px; } .search-row { flex-direction:column; } .search-row button { padding:10px; } } /* --- Einstellungen: links die Bereiche, rechts die Felder (wie im SeKo-Mailer) ---------------- */ .settings { display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:start; } .subnav { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px; position:sticky; top:16px; } .subnav a { display:block; padding:8px 12px; border-radius:6px; color:var(--text); text-decoration:none; font-size:14px; } .subnav a:hover { background:var(--sunken); } .subnav a.active { background:var(--accent-soft); color:var(--accent-text); font-weight:600; } .field { padding:14px 0; border-bottom:1px solid var(--line); } .field:last-of-type { border-bottom:0; } .field > label { margin:0 0 6px; color:var(--text); font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .field .hint { margin:6px 0 0; } .field input[type=number] { width:160px; } .field select { max-width:480px; } .field textarea { min-height:360px; font-family:ui-monospace,Consolas,monospace; font-size:13px; line-height:1.45; resize:vertical; } .field-check { display:flex; gap:8px; align-items:center; font-size:14px; color:var(--text); margin:0; font-weight:600; } .field-check input { width:auto; margin:0; accent-color:var(--accent); } .field-sources { display:flex; flex-wrap:wrap; gap:8px; } .changed { font-size:11px; font-weight:600; padding:1px 7px; border-radius:999px; background:var(--warn-badge); color:var(--text); } .field-error { color:var(--err); font-size:13px; margin-top:6px; } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color:var(--err); } .prompt-tools { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; font-size:13px; color:var(--muted); } button.link { background:none; border:0; padding:0; color:var(--accent-text); font-size:13px; text-decoration:underline; } .settings-actions { position:sticky; bottom:0; background:var(--card); padding:14px 0 2px; margin-top:6px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .settings-actions .msg { margin:0; padding:6px 12px; } @media (max-width:800px) { .settings { grid-template-columns:1fr; } .subnav { position:static; display:flex; flex-wrap:wrap; gap:4px; } } /* Dialog statt confirm() – wie im SeKo-Mailer */ dialog.dlg { border:0; border-radius:10px; padding:24px 28px; width:min(480px, calc(100vw - 32px)); box-shadow:0 12px 40px var(--accent-shadow); background:var(--card); color:var(--text); font:inherit; } dialog.dlg::backdrop { background:var(--backdrop); } dialog.dlg h2 { margin:0 0 10px; font-size:17px; } dialog.dlg p { margin:0 0 8px; font-size:14px; } .dlg-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; } /* --- RitchyOSS -------------------------------------------------------------------------------- */ body[data-page="ritchy"] main { max-width:1240px; } .ritchy { display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start; } .chat-side { padding:12px; position:sticky; top:16px; max-height:calc(100vh - 110px); overflow:auto; } .new-chat { width:100%; margin-bottom:10px; font-weight:600; } .chat-item { display:flex; align-items:flex-start; gap:4px; border-radius:6px; } .chat-item:hover, .chat-item.active { background:var(--accent-soft); } .chat-item a { flex:1; min-width:0; display:block; padding:7px 8px; text-decoration:none; color:var(--text); } .chat-title { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .chat-item.active .chat-title { color:var(--accent-text); font-weight:600; } .chat-meta { display:block; font-size:12px; color:var(--muted); } .chat-delete { background:none; border:0; color:var(--muted); padding:6px 8px; font-size:16px; line-height:1; visibility:hidden; } .chat-item:hover .chat-delete, .chat-delete:focus { visibility:visible; } .chat-delete:hover { color:var(--err); } .chat-main { min-width:0; } .messages { display:flex; flex-direction:column; gap:14px; padding-bottom:10px; min-height:50vh; } .msg-row { display:flex; gap:10px; align-items:flex-start; } .msg-row.user { justify-content:flex-end; } .bubble { border-radius:12px; padding:12px 16px; max-width:100%; } .bubble.user { background:var(--accent); color:var(--on-accent); max-width:75%; white-space:pre-wrap; overflow-wrap:anywhere; border-bottom-right-radius:4px; } .bubble.assistant { background:var(--card); border:1px solid var(--line); flex:1; min-width:0; border-top-left-radius:4px; } /* Ritchy-Waschbär aus dem Original-Ritchy des IT Centers (ritchy.itc.rwth-aachen.de) */ .avatar { width:36px; height:36px; flex:none; border-radius:50%; } .answer-text { overflow-wrap:anywhere; } .answer-text > :first-child { margin-top:0; } .answer-text > :last-child { margin-bottom:0; } .answer-text p { margin:0 0 10px; } .answer-text ol, .answer-text ul { margin:0 0 10px; padding-left:24px; } .answer-text li { margin:3px 0; } .answer-text li p { margin:4px 0; } .answer-text hr { border:0; border-top:1px solid var(--line); margin:14px 0; } .answer-text code { background:var(--sunken); padding:1px 4px; border-radius:3px; font-size:13px; } .md-code { background:var(--sunken); padding:12px; border-radius:6px; overflow:auto; font-size:13px; margin:0 0 10px; } .md-code code { background:none; padding:0; } .answer-status:empty { display:none; } .thinking { display:inline-block; font-size:13px; color:var(--muted); margin-bottom:6px; } .thinking::after { content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; background:var(--accent); animation:pulse 1s infinite ease-in-out; vertical-align:middle; } @keyframes pulse { 0%,100% { opacity:.25; } 50% { opacity:1; } } @media (prefers-reduced-motion: reduce) { .thinking::after { animation:none; } } .answer-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); } .answer-tools:empty { display:none; } .rating { display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1; min-width:260px; } button.rate { background:var(--card); border:1px solid var(--line); color:var(--text); padding:3px 9px; font-size:15px; border-radius:6px; } button.rate[aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); } .comment-box { flex-basis:100%; } .comment-box textarea { min-height:56px; font-size:14px; } .comment-box .row { display:flex; gap:10px; align-items:center; margin-top:6px; } .trace-summary { font-size:12px; color:var(--muted); } .answer-panels { display:flex; flex-direction:column; gap:6px; margin-top:8px; } .answer-panels:empty { display:none; } .source-list { margin:6px 0 0; padding-left:22px; font-size:14px; } .trace-body { margin-top:8px; font-size:14px; } .trace-body h4 { margin:14px 0 6px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .trace-body h4:first-child { margin-top:4px; } .trace-body .kv { display:grid; grid-template-columns:140px minmax(0,1fr); gap:3px 12px; overflow-wrap:anywhere; } .trace-body .kv b { color:var(--muted); font-weight:600; } table.chunks { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; } table.chunks th, table.chunks td { text-align:left; padding:5px 6px; border-bottom:1px solid var(--line); vertical-align:top; } table.chunks th { color:var(--muted); font-weight:600; } table.chunks td.num { text-align:right; white-space:nowrap; } table.chunks td.reason { color:var(--muted); font-size:12px; } .query-list { margin:0; padding-left:20px; } table.chunks tr.unused td { color:var(--muted); } table.chunks tr.chunk-text td { border-bottom:1px solid var(--line); padding-top:0; } table.chunks tr:has(+ tr.chunk-text) td { border-bottom:0; } .composer { position:sticky; bottom:0; padding:12px 0 16px; background:var(--bg); } .composer-row { display:flex; gap:8px; align-items:flex-end; } .composer textarea { flex:1; resize:none; min-height:46px; max-height:240px; padding:11px 14px; border-radius:10px; font-size:15px; line-height:1.4; } .composer-row > button { height:46px; padding:0 20px; border-radius:10px; font-weight:600; } .composer-row > button.attach { width:46px; padding:0; background:var(--card); border-color:var(--line); color:var(--accent-text); display:inline-flex; align-items:center; justify-content:center; } .composer-row > button.attach:hover { border-color:var(--accent); } .attach-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .attach-preview { display:flex; align-items:center; gap:12px; margin-bottom:8px; padding:8px; background:var(--card); border:1px solid var(--line); border-radius:10px; } .attach-preview img { width:72px; height:54px; object-fit:cover; border-radius:6px; border:1px solid var(--line); } .attach-preview .attach-info { flex:1; min-width:0; display:flex; flex-direction:column; font-size:14px; } .attach-preview .attach-info b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .attach-preview .msg { margin:0; flex:1; } .chat-main.droppable.is-dragover .messages { outline:2px dashed var(--accent); outline-offset:6px; border-radius:10px; } .user-col { display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:75%; } .user-col .bubble.user { max-width:100%; } .shot img { display:block; max-width:260px; max-height:180px; border-radius:10px; border:1px solid var(--line); } .shot-notes:empty { display:none; } .welcome { text-align:center; padding:40px 10px 20px; color:var(--muted); } .welcome h2 { color:var(--text); font-size:22px; margin:6px 0 8px; } .welcome p { margin:6px auto; max-width:560px; } .welcome-mark { width:72px; height:72px; } .welcome .examples { justify-content:center; margin-top:18px; } @media (max-width:800px) { .ritchy { grid-template-columns:1fr; } .chat-side { position:static; max-height:220px; } .bubble.user, .user-col { max-width:88%; } .shot img { max-width:200px; } .avatar { display:none; } .trace-body .kv { grid-template-columns:1fr; } }