From 05589c1c06ccfac2e7de01c15afbea30b1b7771b Mon Sep 17 00:00:00 2001 From: Server <10.9.8.250@reg.snw.su> Date: Mon, 10 Aug 2026 00:04:50 +0000 Subject: [PATCH] Improve light theme contrast --- docslib/templates/client.css | 14 ++++++++++---- tests/test_server.py | 6 +++++- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/docslib/templates/client.css b/docslib/templates/client.css index 6fcfc13..9176030 100644 --- a/docslib/templates/client.css +++ b/docslib/templates/client.css @@ -1,15 +1,18 @@ :root { --shell: #ffffff; --surface: #f2f2f2; - --elevated: #e5e5e5; + --elevated: #d4d4d4; --control: #dedede; --active: #cacaca; + --selection-bg: #111111; + --selection-text: #ffffff; + --selection-number: #bcbcbc; --text: #111111; --muted: #6d6d6d; --faint: #9a9a9a; --border: #c9c9c9; --tree-line: #c5c5c5; - --shadow: 0 24px 70px rgba(0, 0, 0, .16); + --shadow: 0 24px 70px rgba(0, 0, 0, .4); color-scheme: light; } @@ -19,6 +22,9 @@ --elevated: #222222; --control: #242424; --active: #686868; + --selection-bg: #f0f0f0; + --selection-text: #050505; + --selection-number: #555555; --text: #f4f4f4; --muted: #a5a5a5; --faint: #747474; @@ -58,8 +64,8 @@ button { color: inherit; } .tree-link { display: flex; width: 100%; min-height: 32px; align-items: baseline; gap: 5px; padding: 4px 10px; border: 0; border-radius: 18px; color: var(--text); background: transparent; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; } .tree-link:hover { background: var(--control); } .tree-link.active { background: var(--active); } -.sidebar-header-buttons .header-link.active, .desktop-sidebar .tree-link.active, .mobile-menu-view .header-link.active, .mobile-menu-view .tree-link.active { color: #050505; background: #f0f0f0; } -.desktop-sidebar .tree-link.active .tree-number, .mobile-menu-view .tree-link.active .tree-number { color: #555; } +.sidebar-header-buttons .header-link.active, .desktop-sidebar .tree-link.active, .mobile-menu-view .header-link.active, .mobile-menu-view .tree-link.active { color: var(--selection-text); background: var(--selection-bg); } +.desktop-sidebar .tree-link.active .tree-number, .mobile-menu-view .tree-link.active .tree-number { color: var(--selection-number); } .tree-number { flex: 0 0 auto; color: var(--muted); } .tree-title { min-width: 0; overflow-wrap: anywhere; } diff --git a/tests/test_server.py b/tests/test_server.py index 0674592..a9dea4d 100644 --- a/tests/test_server.py +++ b/tests/test_server.py @@ -78,7 +78,11 @@ def test_all_endpoints_and_self_contained_build(tmp_path): assert "flex: 1 1 auto; flex-direction: column" in html assert "padding: 0 18px 22px" in html assert "--desktop-sidebar-width: clamp(270px, 25vw, 400px)" in html - assert ".mobile-menu-view .tree-link.active { color: #050505; background: #f0f0f0; }" in html + assert "--selection-bg: #111111" in html + assert "--selection-bg: #f0f0f0" in html + assert ".mobile-menu-view .tree-link.active { color: var(--selection-text); background: var(--selection-bg); }" in html + assert "--elevated: #d4d4d4" in html + assert "--shadow: 0 24px 70px rgba(0, 0, 0, .4)" in html assert "elements.pageSurface.scrollTo" in html assert "font-family: system-ui; font-size: 16px" in html assert ".glyph-button, .refresh-glyph { font-family: Arial" in html