diff --git a/backend/bot/app/web/themes/ascii/style.css b/backend/bot/app/web/themes/ascii/style.css index e0a6c7d..1d49250 100644 --- a/backend/bot/app/web/themes/ascii/style.css +++ b/backend/bot/app/web/themes/ascii/style.css @@ -1243,3 +1243,51 @@ body:has(.theme-key-ascii) .install-platform-item[data-selected] svg { .theme-key-ascii table tbody tr:hover td { color: #ffffff; } + +/* ============================================================ + * Newer webapp surfaces: telegram banner, traffic/referral + * dropdowns, login language picker. Flatten the accent pills, + * rounded badges and colored gradients these ship with so they + * read as plain console boxes. + * ============================================================ */ + +/* Telegram notifications banner: the .card chrome is already + * flattened above; only the rounded, color-tinted icon badge needs + * squaring off (the Send glyph itself is whitened by the global rule). */ +.theme-key-ascii .telegram-notifications-icon { + border: 1px solid #ffffff; + border-radius: 0; + background: #000000; + color: #ffffff; +} + +/* Premium-server / referral-tariff dropdown help glyph: drop the + * pill background in every state (the accent maps to white here, + * which would otherwise paint a white blob behind the icon). */ +.theme-key-ascii .premium-server-help-icon, +.theme-key-ascii .premium-server-dropdown summary:hover .premium-server-help-icon, +.theme-key-ascii .premium-server-dropdown[open] .premium-server-help-icon, +.theme-key-ascii .referral-tariff-dropdown summary:hover .premium-server-help-icon, +.theme-key-ascii .referral-tariff-dropdown[open] .premium-server-help-icon { + padding: 0; + border-radius: 0; + background: transparent; + color: #ffffff; +} + +/* The check on the selected language sits on a solid white row, so a + * white glyph would vanish — invert it to black to keep it readable. */ +.theme-key-ascii .language-select-item[data-selected] .language-select-item-check { + color: #000000 !important; + stroke: #000000 !important; +} + +/* Login-screen language trigger: square the rounded chip. */ +.theme-key-ascii .auth-language-trigger { + border-radius: 0; +} + +/* Render flag emoji as monochrome glyphs to stay in the console palette. */ +.theme-key-ascii .emoji-flag { + filter: grayscale(1) contrast(1.05); +} diff --git a/backend/bot/app/web/themes/ascii/theme.json b/backend/bot/app/web/themes/ascii/theme.json index 6880a94..25f6a12 100644 --- a/backend/bot/app/web/themes/ascii/theme.json +++ b/backend/bot/app/web/themes/ascii/theme.json @@ -9,7 +9,7 @@ "use_primary_accent": false, "use_in_admin": true, "css_file": "style.css", - "assets_version": 4, + "assets_version": 5, "tokens": { "color_scheme": "dark", "style_preset": "ascii" diff --git a/backend/bot/app/web/themes/light/style.css b/backend/bot/app/web/themes/light/style.css index 8a7fa2f..af378f1 100644 --- a/backend/bot/app/web/themes/light/style.css +++ b/backend/bot/app/web/themes/light/style.css @@ -204,3 +204,9 @@ body:has(.theme-key-light) .install-platform-item[data-selected] { .theme-key-light .install-loading .ui-spinner { color: color-mix(in srgb, var(--accent) 55%, #000000); } + +/* Telegram notifications banner: keep the warm warning tint but swap the + * dark-theme inset bevel for the soft drop shadow the other light cards use. */ +.theme-key-light .telegram-notifications-card { + box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07); +} diff --git a/backend/bot/app/web/themes/light/theme.json b/backend/bot/app/web/themes/light/theme.json index 175060f..1a75f47 100644 --- a/backend/bot/app/web/themes/light/theme.json +++ b/backend/bot/app/web/themes/light/theme.json @@ -9,7 +9,7 @@ "use_primary_accent": true, "use_in_admin": true, "css_file": "style.css", - "assets_version": 3, + "assets_version": 4, "tokens": { "color_scheme": "light" } diff --git a/backend/bot/app/web/themes/windows95/style.css b/backend/bot/app/web/themes/windows95/style.css index abd98e4..cd896f9 100644 --- a/backend/bot/app/web/themes/windows95/style.css +++ b/backend/bot/app/web/themes/windows95/style.css @@ -1352,3 +1352,64 @@ body:has(.theme-key-windows95) .install-platform-item[data-selected] { .theme-key-windows95 a:not(.btn):not(.bottom-nav button):not([class*="-trigger"]):visited { color: #800080; } + +/* ---------- Newer webapp surfaces: telegram banner, traffic / + * referral dropdowns, login language picker ---------- */ + +/* Telegram notifications banner: the Card chrome is already beveled by + * the shared .card rule; give the icon badge a raised chip look instead + * of the rounded, color-tinted default (the Send glyph maps to send.png). */ +.theme-key-windows95 .telegram-notifications-icon { + border-width: 2px; + border-style: solid; + border-color: #ffffff #404040 #404040 #ffffff; + border-radius: 0; + background: var(--panel); + color: var(--text); + box-shadow: + inset 1px 1px 0 #dfdfdf, + inset -1px -1px 0 #808080; +} + +/* Standalone referral-tariff dropdown and bonus rows: bevel them like the + * rest of the surfaces so they don't read as flat 1px boxes. */ +.theme-key-windows95 .referral-tariff-dropdown, +.theme-key-windows95 .referral-bonus-row { + border-width: 2px; + border-style: solid; + border-color: #ffffff #404040 #404040 #ffffff; + border-radius: 0; + background: var(--panel); + box-shadow: + inset 1px 1px 0 #dfdfdf, + inset -1px -1px 0 #808080; +} + +.theme-key-windows95 .referral-bonus-row-nested { + background: #dfdfdf; +} + +/* Premium-server / referral help glyph: drop the rounded accent pill so it + * sits inline as a plain stroked question mark. */ +.theme-key-windows95 .premium-server-help-icon, +.theme-key-windows95 .premium-server-dropdown summary:hover .premium-server-help-icon, +.theme-key-windows95 .premium-server-dropdown[open] .premium-server-help-icon, +.theme-key-windows95 .referral-tariff-dropdown summary:hover .premium-server-help-icon, +.theme-key-windows95 .referral-tariff-dropdown[open] .premium-server-help-icon { + padding: 0; + border-radius: 0; + background: transparent; + color: var(--text); +} + +/* The selected language row turns navy; its check maps to a dark bitmap, + * so invert it to white to keep it visible. */ +.theme-key-windows95 .language-select-item[data-highlighted] .language-select-item-check, +.theme-key-windows95 .language-select-item[data-selected] .language-select-item-check { + filter: brightness(0) invert(1); +} + +/* Login-screen language trigger: square the rounded chip. */ +.theme-key-windows95 .auth-language-trigger { + border-radius: 0; +} diff --git a/backend/bot/app/web/themes/windows95/theme.json b/backend/bot/app/web/themes/windows95/theme.json index ab765c2..2eb8936 100644 --- a/backend/bot/app/web/themes/windows95/theme.json +++ b/backend/bot/app/web/themes/windows95/theme.json @@ -9,7 +9,7 @@ "use_primary_accent": false, "use_in_admin": true, "css_file": "style.css", - "assets_version": 11, + "assets_version": 12, "tokens": { "color_scheme": "light", "style_preset": "win95" diff --git a/tests/test_webapp_themes_config.py b/tests/test_webapp_themes_config.py index 3241896..ec0a2a2 100644 --- a/tests/test_webapp_themes_config.py +++ b/tests/test_webapp_themes_config.py @@ -33,14 +33,14 @@ class WebappThemesConfigTests(unittest.TestCase): self.assertEqual(win95.tokens.style_preset, "win95") self.assertFalse(win95.use_primary_accent) self.assertTrue(win95.use_in_admin) - self.assertEqual(win95.assets_version, 11) - self.assertEqual(cfg.theme_by_key("light").assets_version, 3) + self.assertEqual(win95.assets_version, 12) + self.assertEqual(cfg.theme_by_key("light").assets_version, 4) ascii_theme = cfg.theme_by_key("ascii") self.assertIsNotNone(ascii_theme) self.assertEqual(ascii_theme.css_file, "style.css") self.assertFalse(ascii_theme.use_primary_accent) self.assertTrue(ascii_theme.use_in_admin) - self.assertEqual(ascii_theme.assets_version, 4) + self.assertEqual(ascii_theme.assets_version, 5) def test_env_override_default_theme(self): cfg = builtin_webapp_themes_config("#00fe7a") @@ -382,7 +382,7 @@ class WebappThemesConfigTests(unittest.TestCase): descriptor["assets_version"], cfg.theme_by_key("windows95").assets_version, ) - self.assertEqual(descriptor["assets_version"], 11) + self.assertEqual(descriptor["assets_version"], 12) self.assertIn("lucide-house", css) self.assertIn("lucide-earth", css) self.assertIn("lucide-circle-check", css) @@ -468,6 +468,6 @@ class WebappThemesConfigTests(unittest.TestCase): descriptor = json.loads((stale_theme_dir / "theme.json").read_text(encoding="utf-8")) css = (stale_theme_dir / "style.css").read_text(encoding="utf-8") self.assertEqual(descriptor["assets_version"], cfg.theme_by_key("ascii").assets_version) - self.assertEqual(descriptor["assets_version"], 4) + self.assertEqual(descriptor["assets_version"], 5) self.assertIn("Console-style tables", css) self.assertIn("Install guide theme surfaces", css)