From dcc1a2f3ad5826bbc087e147215097f7d969115a Mon Sep 17 00:00:00 2001
From: JiriUhlir <149317995+JiriUhlir@users.noreply.github.com>
Date: Wed, 27 May 2026 13:01:56 +0200
Subject: [PATCH] csbot styly
---
app/static/csbot-logo.svg | 26 +++++++++++++
app/static/styles.css | 77 +++++++++++++++++++++++++++------------
app/templates/layout.py | 5 ++-
3 files changed, 84 insertions(+), 24 deletions(-)
create mode 100644 app/static/csbot-logo.svg
diff --git a/app/static/csbot-logo.svg b/app/static/csbot-logo.svg
new file mode 100644
index 0000000..83405a0
--- /dev/null
+++ b/app/static/csbot-logo.svg
@@ -0,0 +1,26 @@
+
+
+
+
diff --git a/app/static/styles.css b/app/static/styles.css
index 58ec36e..1e76153 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -1,14 +1,17 @@
:root {
- --bg: #f6f7fb;
+ --bg: #f4f8fa;
--card: #ffffff;
- --text: #1f2937;
- --muted: #6b7280;
- --border: #e5e7eb;
- --primary: #2563eb;
- --primary-dark: #1d4ed8;
- --danger: #dc2626;
- --danger-dark: #b91c1c;
- --success: #16a34a;
+ --text: #183747;
+ --muted: #627987;
+ --border: #d8e5eb;
+ --primary: #c83676;
+ --primary-dark: #a92a62;
+ --secondary: #1e516b;
+ --secondary-dark: #173d51;
+ --danger: #b8223e;
+ --danger-dark: #941a31;
+ --success: #188654;
+ --success-bg: #e7f5ee;
}
* {
@@ -18,29 +21,51 @@
body {
margin: 0;
font-family: Arial, sans-serif;
- background: var(--bg);
+ background: linear-gradient(180deg, #eef6f9 0, var(--bg) 220px);
color: var(--text);
}
header {
- background: #111827;
+ background: var(--secondary);
color: white;
- padding: 18px 32px;
+ padding: 14px 32px;
display: flex;
align-items: center;
justify-content: space-between;
+ border-bottom: 5px solid var(--primary);
+ box-shadow: 0 10px 26px rgba(30, 81, 107, 0.16);
}
-header h1 {
- margin: 0;
- font-size: 22px;
+.brand {
+ display: inline-flex;
+ align-items: center;
+ gap: 14px;
+ color: white;
+ text-decoration: none;
+ font-weight: 800;
+ font-size: 19px;
+}
+
+.brand:hover {
+ text-decoration: none;
+}
+
+.brand img {
+ display: block;
+ width: 148px;
+ height: auto;
+ background: white;
+ border-radius: 6px;
+ padding: 6px 8px;
}
nav a {
color: white;
text-decoration: none;
- margin-left: 18px;
+ margin-left: 8px;
font-weight: 600;
+ padding: 9px 12px;
+ border-radius: 8px;
}
main {
@@ -52,12 +77,16 @@ main {
.card {
background: var(--card);
border: 1px solid var(--border);
- border-radius: 14px;
+ border-radius: 8px;
padding: 22px;
- box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+ box-shadow: 0 8px 24px rgba(30, 81, 107, 0.07);
margin-bottom: 24px;
}
+.card h2 {
+ color: var(--secondary);
+}
+
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -83,7 +112,8 @@ th {
font-size: 13px;
text-transform: uppercase;
letter-spacing: .04em;
- background: #f9fafb;
+ background: #eef6f9;
+ border-top: 1px solid var(--border);
}
a {
@@ -133,8 +163,8 @@ button:hover,
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
- background: #dcfce7;
- color: #166534;
+ background: var(--success-bg);
+ color: var(--success);
font-weight: 700;
}
@@ -149,7 +179,8 @@ select {
input[readonly] {
width: 100%;
font-family: monospace;
- background: #f9fafb;
+ background: #f8fbfc;
+ color: var(--secondary-dark);
}
.cmd-row {
@@ -192,7 +223,7 @@ details summary {
}
pre {
- background: #111827;
+ background: var(--secondary-dark);
color: #e5e7eb;
padding: 18px;
border-radius: 12px;
diff --git a/app/templates/layout.py b/app/templates/layout.py
index d5cb3e8..ff0c990 100644
--- a/app/templates/layout.py
+++ b/app/templates/layout.py
@@ -13,7 +13,10 @@ def page(title: str, body: str) -> str:
+ AppFactory
+