Christopher Mayor
8a859e2e92
- Kanban board with 5 columns (Backlog, Todo, In Progress, Review, Done) - Agent assignment for all OpenClaw agents - Priority levels and tags - Wiki auto-generation on task completion - REST API for agent heartbeat integration - Real-time updates via WebSocket - SQLite database for task storage - Docker deployment configuration - Traefik ingress configuration
183 lines
2.7 KiB
CSS
183 lines
2.7 KiB
CSS
:root {
|
|
--bg: #0e1117;
|
|
--panel: #161b22;
|
|
--muted: #98a6b3;
|
|
--text: #e6edf3;
|
|
--border: #2d333b;
|
|
--accent: #2f81f7;
|
|
--critical: #f85149;
|
|
--high: #db6d28;
|
|
--medium: #d29922;
|
|
--low: #238636;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
background: radial-gradient(circle at top, #1c2431, var(--bg) 55%);
|
|
color: var(--text);
|
|
}
|
|
|
|
.topbar {
|
|
padding: 1.2rem;
|
|
border-bottom: 1px solid var(--border);
|
|
background: rgba(22, 27, 34, 0.9);
|
|
}
|
|
|
|
.topbar h1 {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.topbar p {
|
|
margin: 0.25rem 0 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.composer {
|
|
padding: 1rem 1.2rem;
|
|
}
|
|
|
|
.composer h2 {
|
|
margin: 0 0 0.7rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#task-form {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea,
|
|
button {
|
|
border: 1px solid var(--border);
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
border-radius: 8px;
|
|
padding: 0.55rem 0.7rem;
|
|
}
|
|
|
|
textarea {
|
|
grid-column: 1 / -1;
|
|
min-height: 70px;
|
|
resize: vertical;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
background: linear-gradient(90deg, #1f6feb, var(--accent));
|
|
border: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.board {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(220px, 1fr));
|
|
gap: 1rem;
|
|
padding: 0 1.2rem 1.2rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.column {
|
|
background: rgba(22, 27, 34, 0.9);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
min-height: 220px;
|
|
padding: 0.7rem;
|
|
}
|
|
|
|
.column h2 {
|
|
font-size: 0.95rem;
|
|
margin: 0 0 0.6rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.card {
|
|
background: #202632;
|
|
border: 1px solid #334055;
|
|
border-radius: 8px;
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.card-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.4rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.card-title {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.card-desc {
|
|
margin: 0.5rem 0;
|
|
font-size: 0.85rem;
|
|
color: #c7d3df;
|
|
}
|
|
|
|
.meta {
|
|
margin: 0.2rem 0;
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.badge {
|
|
border-radius: 999px;
|
|
font-size: 0.72rem;
|
|
padding: 0.18rem 0.45rem;
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.priority.low {
|
|
color: var(--low);
|
|
border-color: var(--low);
|
|
}
|
|
|
|
.priority.medium {
|
|
color: var(--medium);
|
|
border-color: var(--medium);
|
|
}
|
|
|
|
.priority.high {
|
|
color: var(--high);
|
|
border-color: var(--high);
|
|
}
|
|
|
|
.priority.critical {
|
|
color: var(--critical);
|
|
border-color: var(--critical);
|
|
}
|
|
|
|
.status-select {
|
|
width: 100%;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.board {
|
|
grid-template-columns: repeat(2, minmax(240px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.board {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|