optimize msh layouts

2026-04-25 21:34:55 +02:00
parent 06aef93d24
commit c90675d17d
4 changed files with 181 additions and 9 deletions
--- a/public/assets/styles/base.css
+++ b/public/assets/styles/base.css
@@ -463,3 +463,105 @@ span.think {
        transform: rotate(360deg);
    }
 }
+
+/* RetrieX chat meta/status cards */
+.retriex-meta-card,
+.retriex-alert {
+    margin: 0.65rem 0;
+    border: 1px solid rgba(134, 183, 254, 0.26);
+    border-radius: 14px;
+    background: rgba(13, 17, 23, 0.72);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+}
+
+.retriex-meta-card {
+    padding: 0.85rem 0.95rem;
+}
+
+.retriex-meta-card__eyebrow {
+    color: #86b7fe;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-bottom: 0.2rem;
+}
+
+.retriex-meta-card__title {
+    color: #f8f9fa;
+    font-weight: 700;
+    margin-bottom: 0.55rem;
+}
+
+.retriex-meta-card__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    margin-bottom: 0.65rem;
+}
+
+.retriex-meta-pill {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 999px;
+    padding: 0.18rem 0.55rem;
+    background: rgba(134, 183, 254, 0.14);
+    color: #cfe2ff;
+    font-size: 0.78rem;
+    font-weight: 600;
+}
+
+.retriex-meta-query {
+    display: grid;
+    gap: 0.25rem;
+}
+
+.retriex-meta-query span {
+    color: rgba(248, 249, 250, 0.68);
+    font-size: 0.78rem;
+}
+
+.retriex-meta-query code {
+    display: block;
+    width: 100%;
+    white-space: pre-wrap;
+    word-break: break-word;
+    border-radius: 10px;
+    padding: 0.45rem 0.55rem;
+    background: rgba(0, 0, 0, 0.28);
+    color: #f8f9fa;
+}
+
+.retriex-alert {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.85rem 0.95rem;
+}
+
+.retriex-alert--warning {
+    border-color: rgba(255, 193, 7, 0.32);
+    background: rgba(60, 44, 5, 0.56);
+}
+
+.retriex-alert--error {
+    border-color: rgba(220, 53, 69, 0.34);
+    background: rgba(58, 12, 18, 0.56);
+}
+
+.retriex-alert__icon {
+    flex: 0 0 auto;
+    font-size: 1.15rem;
+    line-height: 1.2;
+}
+
+.retriex-alert__title {
+    color: #f8f9fa;
+    font-weight: 700;
+    margin-bottom: 0.15rem;
+}
+
+.retriex-alert__text {
+    color: rgba(248, 249, 250, 0.82);
+    font-size: 0.92rem;
+    line-height: 1.45;
+}