lichenblankie/tinyweb-forum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style forum inputs/buttons to match dark theme, fix post border

Browse source
This commit is contained in:
lichenblankie 2026-06-05 04:19:41 +00:00
parent 0ce2127919
commit 3ba60178be
1 changed files with 30 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

35
tinyweb_forum/handlers.py
View file

@ -19,16 +19,41 @@ def esc(s):
FORUM_CSS = """ FORUM_CSS = """
<style> <style>
.forum-form { max-width: 500px; } .forum-form { max-width: 500px; }
.forum-form input:not([type=checkbox]):not([type=radio]), .forum-form textarea { width: 100%; box-sizing: border-box; padding: 6px; margin-bottom: 8px; } .forum-form input:not([type=checkbox]):not([type=radio]), .forum-form textarea {
width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 8px;
background: rgba(8, 18, 22, 0.8); border: 1px solid rgba(40, 70, 65, 0.4);
border-radius: 4px; color: #90b4ac; font-size: 0.95rem;
transition: border-color 0.2s, box-shadow 0.3s;
}
.forum-form input:not([type=checkbox]):not([type=radio]):focus, .forum-form textarea:focus {
outline: none; border-color: rgba(80, 140, 110, 0.5); box-shadow: 0 0 18px rgba(100, 200, 150, 0.06);
}
.forum-form input[type=checkbox] { width: auto; margin: 0; } .forum-form input[type=checkbox] { width: auto; margin: 0; }
.forum-form button {
padding: 8px 16px; margin-bottom: 8px;
background: rgba(10, 22, 25, 0.8); border: 1px solid rgba(40, 70, 65, 0.4);
border-radius: 4px; color: #5a7880; font-size: 0.88rem; cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.3s;
}
.forum-form button:hover {
background: rgba(15, 35, 35, 0.8); color: #90b4ac;
border-color: rgba(80, 130, 110, 0.5); box-shadow: 0 0 12px rgba(100, 200, 150, 0.06);
}
.forum-form textarea { font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.6; resize: vertical; }
.forum-form label.inline-label input { width: 60px; display: inline; } .forum-form label.inline-label input { width: 60px; display: inline; }
.forum-form button { padding: 6px 16px; }
.forum-form label:not(.checkbox-label):not(.inline-label) { display: block; margin-bottom: 8px; } .forum-form label:not(.checkbox-label):not(.inline-label) { display: block; margin-bottom: 8px; }
.forum-form label.checkbox-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .forum-form label.checkbox-label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.forum-form label.inline-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; white-space: nowrap; } .forum-form label.inline-label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; white-space: nowrap; }
.forum-form small { display: block; margin-bottom: 8px; } .forum-form small { display: block; margin-bottom: 8px; }
</style> .forum-actions { margin: 0.5rem 0; }
""" a.forum-action, a.forum-action-inline {
color: #5a7880; text-decoration: none; border-bottom: none; font-size: 0.85rem;
}
a.forum-action:hover, a.forum-action-inline:hover { color: #90b4ac; border-bottom: none; }
p.meta { font-size: 0.85rem; color: #3a5560; }
.forum-form input[type=text], .forum-form input[type=url] { font-family: inherit; }
.forum .post { border-left-color: rgba(40, 70, 65, 0.3); }
</style>"""
class ForumHandlers: class ForumHandlers:
@ -326,7 +351,7 @@ class ForumHandlers:
if p["parent_id"]: if p["parent_id"]:
parent_ref = f' <small><a href="#post-{esc(p["parent_id"])}">↪ reply</a></small>' parent_ref = f' <small><a href="#post-{esc(p["parent_id"])}">↪ reply</a></small>'
posts_html += ( posts_html += (
f'<div id="post-{esc(p["id"])}" style="margin-bottom:1rem;padding-left:1rem;border-left:2px solid #ddd">' f'<div class="post" id="post-{esc(p["id"])}" style="margin-bottom:1rem;padding-left:1rem;border-left:2px solid">'
f'<small><b>{esc(self._author_str(p["author_name"], p["author_instance"]))}</b>' f'<small><b>{esc(self._author_str(p["author_name"], p["author_instance"]))}</b>'
f'{self._block_link(p["author_instance"])}' f'{self._block_link(p["author_instance"])}'
f' · {self._time_ago(p["created_at"])}{parent_ref}' f' · {self._time_ago(p["created_at"])}{parent_ref}'