forust/telegram-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Polish web UI styling
ci / lint (push) Failing after 8s
Details
ci / validate (push) Successful in 6s
Details
ci / publish (push) Has been skipped
Details

Browse Source
This commit is contained in:
mr-forust
2026-06-28 00:53:54 +02:00
parent 01a0d9c6d4
commit 6bc8d6ed36
5 changed files with 142 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telegram Scraper Control Panel</title> <title>Telegram Scraper Control Panel</title>
<link rel="stylesheet" href="/static/style.css?v=4" /> <link rel="stylesheet" href="/static/style.css?v=6" />
</head> </head>
<body> <body>
<div class="app-shell"> <div class="app-shell">
webui/settings.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telegram Scraper Settings</title> <title>Telegram Scraper Settings</title>
<link rel="stylesheet" href="/static/style.css?v=5" /> <link rel="stylesheet" href="/static/style.css?v=6" />
</head> </head>
<body> <body>
<div class="app-shell settings-page-shell"> <div class="app-shell settings-page-shell">
webui/style.css
+138 -103
View File
@@ -1,22 +1,25 @@
:root { :root {
color-scheme: dark; color-scheme: dark;
--bg-color: #000000; --bg-color: #05070d;
--panel: #0b0b0b; --panel: #0c111d;
--panel-solid: #101010; --panel-solid: #111827;
--panel-alt: #050505; --panel-alt: #080b13;
--text-color: #f2f3f5; --text-color: #f4f7fb;
--accent: #1fb9aa; --accent: #355fc7;
--accent-2: #58a6ff; --accent-hover: #426fdd;
--bubble-own: #12342f; --accent-soft: #111d3c;
--bubble-other: #171717; --accent-line: #284aa0;
--dim: #9aa0a6; --accent-2: #7aa5ff;
--line: #242424; --bubble-own: #132552;
--bubble-other: #141923;
--dim: #a4adbd;
--line: #232b3a;
--danger: #ff7373; --danger: #ff7373;
--ok: #65e6a4; --ok: #65e6a4;
--warn: #f6c969; --warn: #f6c969;
--info: #8ec7ff; --info: #8ec7ff;
--radius: 18px; --radius: 22px;
--shadow: none; --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
--font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
} }
@@ -27,7 +30,10 @@
body { body {
margin: 0; margin: 0;
background: #000; background:
radial-gradient(circle at 16% -10%, rgba(53, 95, 199, 0.26), transparent 34rem),
radial-gradient(circle at 95% 18%, rgba(122, 165, 255, 0.1), transparent 28rem),
var(--bg-color);
color: var(--text-color); color: var(--text-color);
font-family: var(--font-ui); font-family: var(--font-ui);
font-size: 15px; font-size: 15px;
@@ -42,8 +48,8 @@ a {
a:hover, a:hover,
button:hover { button:hover {
border-color: #333; border-color: #354158;
background: #151515; background: #151d2c;
color: var(--text-color); color: var(--text-color);
} }
@@ -58,36 +64,50 @@ button {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: 308px minmax(0, 1fr); grid-template-columns: 360px minmax(0, 1fr);
} }
.sidebar { .sidebar {
background: #050505; background:
linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%),
var(--panel-alt);
border-right: 1px solid var(--line); border-right: 1px solid var(--line);
padding: 24px 20px; padding: 30px 24px;
overflow-y: auto;
} }
.content { .content {
overflow-y: auto; overflow-y: auto;
padding: 24px; padding: 32px;
max-width: 1440px; max-width: 1440px;
width: 100%; width: 100%;
} }
.brand-block {
padding: 0 2px;
}
.brand-block h1, .brand-block h1,
.dialog-header h2 { .dialog-header h2 {
margin: 0; margin: 0;
color: var(--accent); color: var(--accent);
font-size: 1.5rem; font-size: 1.65rem;
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
.brand-block .muted {
margin: 22px 0 0;
max-width: 26ch;
font-size: 1.03rem;
line-height: 1.62;
}
.eyebrow, .eyebrow,
.section-title { .section-title {
color: var(--dim); color: var(--dim);
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.14em;
} }
.muted { .muted {
@@ -106,7 +126,7 @@ button {
} }
.nav-links { .nav-links {
margin: 28px 0; margin: 34px 0;
} }
.nav-link, .nav-link,
@@ -115,7 +135,7 @@ input,
.content-tab, .content-tab,
.viewer-channel-item { .viewer-channel-item {
border: 1px solid var(--line); border: 1px solid var(--line);
background: #101010; background: rgba(17, 24, 39, 0.74);
color: var(--text-color); color: var(--text-color);
border-radius: 999px; border-radius: 999px;
} }
@@ -127,27 +147,33 @@ input,
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 42px; min-height: 42px;
padding: 9px 13px; padding: 10px 18px;
cursor: pointer; cursor: pointer;
transition: transition:
background-color 0.18s ease, background-color 0.18s ease,
border-color 0.18s ease, border-color 0.18s ease,
box-shadow 0.18s ease,
transform 0.18s ease; transform 0.18s ease;
} }
.nav-link {
min-height: 52px;
font-size: 1rem;
}
.nav-link.active, .nav-link.active,
.button.primary, .button.primary,
.content-tab.active { .content-tab.active {
border-color: #0f6f67; border-color: var(--accent-line);
color: #ffffff; color: #ffffff;
background: #0f6f67; background: linear-gradient(135deg, var(--accent), #27498f);
box-shadow: none; box-shadow: 0 14px 32px rgba(53, 95, 199, 0.28);
} }
.nav-link.active:hover, .nav-link.active:hover,
.button.primary:hover, .button.primary:hover,
.content-tab.active:hover { .content-tab.active:hover {
background: #128277; background: linear-gradient(135deg, var(--accent-hover), #3159ad);
color: #ffffff; color: #ffffff;
} }
@@ -172,7 +198,7 @@ input,
.job-card, .job-card,
.message-card, .message-card,
.settings-dialog { .settings-dialog {
background: var(--panel); background: linear-gradient(180deg, rgba(17, 24, 39, 0.9), rgba(12, 17, 29, 0.96));
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
@@ -182,16 +208,16 @@ input,
.panel, .panel,
.job-card, .job-card,
.message-card { .message-card {
padding: 16px; padding: 22px;
} }
.status-card { .status-card {
margin-top: 16px; margin-top: 20px;
} }
.status-card .button { .status-card .button {
width: 100%; width: 100%;
margin-top: 8px; margin-top: 10px;
} }
.status-card .button:first-of-type { .status-card .button:first-of-type {
@@ -200,10 +226,12 @@ input,
.status-badge { .status-badge {
display: inline-flex; display: inline-flex;
padding: 6px 10px; margin-top: 12px;
padding: 7px 12px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 999px; border-radius: 999px;
color: var(--ok); color: var(--ok);
background: rgba(101, 230, 164, 0.06);
} }
.content-tabs { .content-tabs {
@@ -223,9 +251,9 @@ input,
.panel-grid { .panel-grid {
display: grid; display: grid;
gap: 16px; gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 16px; margin-bottom: 18px;
} }
.settings-health-grid { .settings-health-grid {
@@ -233,7 +261,7 @@ input,
} }
.panel { .panel {
margin-bottom: 16px; margin-bottom: 18px;
} }
.panel-header, .panel-header,
@@ -246,7 +274,7 @@ input,
} }
.stat-value { .stat-value {
margin-top: 8px; margin-top: 10px;
font-size: 2.25rem; font-size: 2.25rem;
font-weight: 700; font-weight: 700;
letter-spacing: -0.05em; letter-spacing: -0.05em;
@@ -271,7 +299,7 @@ input,
.settings-layout { .settings-layout {
display: grid; display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr); grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
gap: 16px; gap: 18px;
align-items: start; align-items: start;
} }
@@ -292,8 +320,8 @@ input,
.settings-account-list { .settings-account-list {
display: grid; display: grid;
gap: 8px; gap: 10px;
margin-top: 12px; margin-top: 14px;
} }
.settings-account-button { .settings-account-button {
@@ -305,16 +333,16 @@ input,
align-items: center; align-items: center;
text-align: left; text-align: left;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 16px;
background: #101010; background: rgba(17, 24, 39, 0.78);
color: var(--text-color); color: var(--text-color);
padding: 10px 12px; padding: 12px 14px;
cursor: pointer; cursor: pointer;
} }
.settings-account-button.active { .settings-account-button.active {
border-color: #0f6f67; border-color: var(--accent-line);
background: #092522; background: var(--accent-soft);
} }
.settings-account-name { .settings-account-name {
@@ -342,13 +370,14 @@ input,
input { input {
min-width: 160px; min-width: 160px;
padding: 10px 13px; padding: 11px 14px;
outline: 0; outline: 0;
border-radius: 14px; border-radius: 16px;
} }
input:focus { input:focus {
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(53, 95, 199, 0.18);
} }
.toggle-row { .toggle-row {
@@ -399,6 +428,7 @@ input:focus {
.switch input:checked + .switch-slider { .switch input:checked + .switch-slider {
border-color: var(--accent); border-color: var(--accent);
background: var(--accent-soft);
} }
.switch input:checked + .switch-slider::before { .switch input:checked + .switch-slider::before {
@@ -424,7 +454,7 @@ td {
} }
tbody tr:hover { tbody tr:hover {
background: #111; background: rgba(53, 95, 199, 0.08);
} }
.action-row { .action-row {
@@ -471,10 +501,10 @@ tbody tr:hover {
align-items: center; align-items: center;
gap: 10px; gap: 10px;
min-height: 38px; min-height: 38px;
padding: 8px; padding: 10px 12px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 16px;
background: #0f0f0f; background: rgba(17, 24, 39, 0.68);
} }
.checkbox-row input { .checkbox-row input {
@@ -504,7 +534,7 @@ tbody tr:hover {
} }
.log-line:hover { .log-line:hover {
background: #111; background: rgba(53, 95, 199, 0.08);
} }
.log-time, .log-time,
@@ -545,11 +575,11 @@ tbody tr:hover {
} }
.settings-dialog::backdrop { .settings-dialog::backdrop {
background: rgba(0, 0, 0, 0.72); background: rgba(3, 6, 13, 0.78);
} }
.dialog-shell { .dialog-shell {
padding: 18px; padding: 24px;
} }
.settings-section { .settings-section {
@@ -588,12 +618,14 @@ tbody tr:hover {
} }
.viewer-sidebar { .viewer-sidebar {
background: #050505; background:
linear-gradient(180deg, rgba(17, 29, 60, 0.72), rgba(8, 11, 19, 0.94) 42%),
var(--panel-alt);
border-right: 1px solid var(--line); border-right: 1px solid var(--line);
padding: 14px 10px; padding: 18px 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 14px;
overflow-y: auto; overflow-y: auto;
} }
@@ -612,13 +644,13 @@ tbody tr:hover {
.viewer-sidebar-head h1 { .viewer-sidebar-head h1 {
margin: 0; margin: 0;
color: var(--accent); color: var(--accent);
font-size: 1.45rem; font-size: 1.55rem;
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
.viewer-channel-list { .viewer-channel-list {
display: grid; display: grid;
gap: 2px; gap: 6px;
} }
.viewer-channel-item { .viewer-channel-item {
@@ -628,23 +660,23 @@ tbody tr:hover {
gap: 10px; gap: 10px;
width: 100%; width: 100%;
min-height: 68px; min-height: 68px;
padding: 8px 10px; padding: 10px 12px;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
border: 1px solid transparent; border: 1px solid transparent;
background: transparent; background: transparent;
color: var(--text-color); color: var(--text-color);
border-radius: 12px; border-radius: 16px;
} }
.viewer-channel-item.active { .viewer-channel-item.active {
border-color: transparent; border-color: var(--accent-line);
background: #12342f; background: var(--accent-soft);
box-shadow: none; box-shadow: 0 12px 28px rgba(53, 95, 199, 0.18);
} }
.viewer-channel-item:hover { .viewer-channel-item:hover {
background: #111; background: rgba(53, 95, 199, 0.12);
} }
.viewer-channel-avatar { .viewer-channel-avatar {
@@ -654,7 +686,7 @@ tbody tr:hover {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
background: #5f6b70; background: linear-gradient(135deg, #456fd5, #243d84);
color: white; color: white;
font-weight: 700; font-weight: 700;
letter-spacing: -0.03em; letter-spacing: -0.03em;
@@ -698,8 +730,8 @@ tbody tr:hover {
min-width: 22px; min-width: 22px;
padding: 2px 7px; padding: 2px 7px;
border-radius: 999px; border-radius: 999px;
background: #12342f; background: rgba(53, 95, 199, 0.22);
color: var(--accent); color: var(--accent-2);
font-size: 0.76rem; font-size: 0.76rem;
text-align: center; text-align: center;
} }
@@ -712,8 +744,10 @@ tbody tr:hover {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: background:
radial-gradient(circle at 18% -12%, rgba(53, 95, 199, 0.18), transparent 32rem),
radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.025) 1px, transparent 1.5px), radial-gradient(circle at 20px 20px, rgba(255, 255, 255, 0.025) 1px, transparent 1.5px),
radial-gradient(circle at 58px 54px, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px), #000; radial-gradient(circle at 58px 54px, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px),
var(--bg-color);
background-size: background-size:
auto, auto,
84px 84px, 84px 84px,
@@ -723,9 +757,9 @@ tbody tr:hover {
.viewer-header { .viewer-header {
flex-shrink: 0; flex-shrink: 0;
padding: 16px 24px; padding: 18px 26px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: #050505; background: rgba(8, 11, 19, 0.94);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
@@ -735,7 +769,7 @@ tbody tr:hover {
.viewer-header h2 { .viewer-header h2 {
margin: 0; margin: 0;
color: var(--accent); color: var(--accent);
font-size: 1.45rem; font-size: 1.55rem;
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
@@ -767,7 +801,7 @@ tbody tr:hover {
.messages-list { .messages-list {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 18px 34px 22px; padding: 22px 38px 26px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -803,7 +837,7 @@ tbody tr:hover {
align-self: center; align-self: center;
padding: 5px 12px; padding: 5px 12px;
border-radius: 999px; border-radius: 999px;
background: #111; background: rgba(17, 24, 39, 0.88);
} }
.chat-date-sep:empty { .chat-date-sep:empty {
@@ -826,11 +860,11 @@ tbody tr:hover {
.chat-bubble { .chat-bubble {
max-width: min(680px, 74%); max-width: min(680px, 74%);
padding: 8px 12px 7px; padding: 9px 13px 8px;
background: var(--bubble-other); background: var(--bubble-other);
border: 1px solid #242424; border: 1px solid var(--line);
border-radius: 18px 18px 18px 6px; border-radius: 18px 18px 18px 6px;
margin-bottom: 6px; margin-bottom: 7px;
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: break-word; word-break: break-word;
position: relative; position: relative;
@@ -858,7 +892,7 @@ tbody tr:hover {
.chat-bubble-wrap--own .chat-bubble { .chat-bubble-wrap--own .chat-bubble {
background: var(--bubble-own); background: var(--bubble-own);
border-color: #1f5b52; border-color: var(--accent-line);
border-radius: 18px 18px 6px 18px; border-radius: 18px 18px 6px 18px;
} }
@@ -980,7 +1014,7 @@ tbody tr:hover {
color: var(--dim); color: var(--dim);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 14px;
background: #0a0a0a; background: rgba(12, 17, 29, 0.86);
} }
.viewer-empty-state { .viewer-empty-state {
@@ -1002,7 +1036,7 @@ tbody tr:hover {
padding: 12px 14px; padding: 12px 14px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 14px; border-radius: 14px;
background: #111; background: var(--panel-solid);
color: var(--text-color); color: var(--text-color);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
transition: transition:
@@ -1011,7 +1045,7 @@ tbody tr:hover {
} }
.toast-success { .toast-success {
border-color: #1f5b52; border-color: var(--accent-line);
} }
.toast-error { .toast-error {
@@ -1099,9 +1133,9 @@ tbody tr:hover {
.account-tabs { .account-tabs {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 10px;
margin-bottom: 16px; margin-bottom: 18px;
padding-bottom: 10px; padding-bottom: 14px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
} }
@@ -1109,11 +1143,11 @@ tbody tr:hover {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
min-height: 38px; min-height: 40px;
padding: 7px 14px; padding: 8px 15px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 999px; border-radius: 999px;
background: #101010; background: rgba(17, 24, 39, 0.72);
color: var(--text-color); color: var(--text-color);
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
@@ -1121,9 +1155,10 @@ tbody tr:hover {
} }
.account-tab.active { .account-tab.active {
border-color: #0f6f67; border-color: var(--accent-line);
color: #ffffff; color: #ffffff;
background: #0f6f67; background: linear-gradient(135deg, var(--accent), #27498f);
box-shadow: 0 12px 26px rgba(53, 95, 199, 0.22);
} }
.account-tab .account-tab-status { .account-tab .account-tab-status {
@@ -1153,8 +1188,8 @@ tbody tr:hover {
.accounts-list { .accounts-list {
display: grid; display: grid;
gap: 8px; gap: 10px;
margin-bottom: 12px; margin-bottom: 14px;
} }
.account-list-item { .account-list-item {
@@ -1162,10 +1197,10 @@ tbody tr:hover {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
padding: 10px 12px; padding: 12px 14px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 16px; border-radius: 16px;
background: #0f0f0f; background: rgba(17, 24, 39, 0.68);
} }
.account-list-info { .account-list-info {
@@ -1194,22 +1229,22 @@ tbody tr:hover {
.add-account-form { .add-account-form {
display: grid; display: grid;
gap: 8px; gap: 10px;
margin-top: 8px; margin-top: 10px;
padding: 12px; padding: 14px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 16px; border-radius: 18px;
background: #0f0f0f; background: rgba(17, 24, 39, 0.68);
} }
.import-account-row { .import-account-row {
display: grid; display: grid;
gap: 8px; gap: 8px;
margin-top: 10px; margin-top: 12px;
padding: 12px; padding: 14px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 16px; border-radius: 18px;
background: #0f0f0f; background: rgba(17, 24, 39, 0.68);
} }
/* ── Active Account Card ─────────────────────────────── */ /* ── Active Account Card ─────────────────────────────── */
webui/swagger.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telegram Scraper API</title> <title>Telegram Scraper API</title>
<link rel="stylesheet" href="/static/style.css" /> <link rel="stylesheet" href="/static/style.css?v=6" />
</head> </head>
<body> <body>
<div class="viewer-shell"> <div class="viewer-shell">
webui/viewer.html
+1 -1
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telegram Scraper Viewer</title> <title>Telegram Scraper Viewer</title>
<link rel="stylesheet" href="/static/style.css?v=4" /> <link rel="stylesheet" href="/static/style.css?v=6" />
</head> </head>
<body> <body>
<div class="viewer-shell"> <div class="viewer-shell">