Files
MCM/tui/styles.tcss
itdrui.de 7f3b4768c3 Initial MCM project: FastAPI + Textual TUI unified messenger
MultiCustomerMessenger supporting Telegram (python-telegram-bot),
WhatsApp (Green API) and SMS (python-gsmmodem-new). REST API with
Bearer-token auth, SQLAlchemy models for MariaDB, APScheduler for
background polling, and Textual TUI running in same asyncio event-loop.
2026-03-03 14:43:19 +01:00

129 lines
2.7 KiB
Plaintext

/* MCM TUI Stylesheet */
Screen {
background: $surface;
}
/* ── Haupt-Layout ─────────────────────────────────────────────────────── */
#main-container {
layout: horizontal;
height: 1fr;
}
/* ── Seitenleiste (Konversationsliste) ────────────────────────────────── */
#sidebar {
width: 28;
min-width: 22;
max-width: 40;
border-right: solid $primary-darken-1;
}
#sidebar-title {
background: $primary;
color: $text;
text-style: bold;
padding: 0 1;
height: 1;
}
#conv-list {
height: 1fr;
}
#conv-list > DataTable {
height: 1fr;
scrollbar-gutter: stable;
}
/* ── Chat-Bereich ─────────────────────────────────────────────────────── */
#chat-area {
width: 1fr;
layout: vertical;
}
#chat-header {
height: 1;
background: $primary-darken-1;
color: $text;
padding: 0 1;
text-style: bold;
}
#message-log {
height: 1fr;
border: none;
padding: 0 1;
scrollbar-gutter: stable;
}
#input-bar {
height: auto;
min-height: 3;
border-top: solid $primary-darken-1;
padding: 0 1;
layout: horizontal;
}
#msg-input {
width: 1fr;
border: none;
}
#send-btn {
width: 10;
min-width: 8;
margin-left: 1;
}
/* ── Kanal-Badges ─────────────────────────────────────────────────────── */
.badge-telegram { color: $accent; }
.badge-whatsapp { color: $success; }
.badge-sms { color: $warning; }
/* ── Nachrichten ──────────────────────────────────────────────────────── */
.msg-inbound { color: $text; }
.msg-outbound { color: $text-muted; }
.msg-failed { color: $error; }
/* ── Compose Modal ────────────────────────────────────────────────────── */
#compose-dialog {
width: 70;
height: auto;
border: thick $primary;
background: $surface;
padding: 1 2;
}
#compose-dialog Label {
margin-top: 1;
}
#compose-dialog Select {
width: 100%;
}
#compose-dialog Input {
width: 100%;
}
#compose-dialog TextArea {
width: 100%;
height: 6;
}
#compose-buttons {
layout: horizontal;
margin-top: 1;
align: right middle;
}
#compose-buttons Button {
margin-left: 1;
}