diff --git a/CHANGELOG.md b/CHANGELOG.md index cf9d378..982c765 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 instead of toasts: no more "Scanning…" or "1 new" pop-ups, and none at all for feeds you do not read. A "Downloaded" toast is only for a file on your screen. - "Check every feed" checks every feed you subscribe to, not every feed on the server. +- The Classic theme is listed in Settings as just "Classic". + +### Fixed + +- Unread counts, the unread dot and the Gone and Error tags are readable in every theme: several + light themes (Flat Remix, Paper, Adwaita, Nordic, Modern) drew them below AA contrast. +- The sign-in page follows the system's light or dark setting, and fits a phone's screen instead of + drawing at desktop width. +- In Classic, a selected item's play and delete buttons are white on the blue, not grey. +- In Nordic's dark half, button and toolbar borders show. +- A zero unread count on the selected feed no longer disappears into the selection. ## [0.8.0] - 2026-09-18 diff --git a/web/app.css b/web/app.css index a6622d7..16d22cc 100644 --- a/web/app.css +++ b/web/app.css @@ -32,12 +32,12 @@ --line:#d6d6d6; /* #D6D6D6 device edge */ --fg:#1a1a1a; /* #1A1A1A icon outline */ --dim:#606060; /* #606060 */ - --faint:#767676; /* between the icon's #929292 and #606060, to clear AA */ + --faint:#6b6b6b; /* between the icon's #929292 and #606060, to clear AA on the page ground */ --accent:#2d5391; /* #2D5391 the deep screen blue reads better on white */ - --accent2:#9a5f0a; /* the EQ amber, taken down until white on it clears AA */ + --accent2:#985e0a; /* the EQ amber, taken down until white on it clears AA */ --ink:#ffffff; --good:#2f7d4f; - --warn:#b06f10; + --warn:#985e0a; /* the same amber; the lighter one failed AA as text */ --bad:#b3402f; --shadow:0 8px 28px rgba(45,83,145,.14); } @@ -124,7 +124,7 @@ --dim:#c4c4c8; --faint:#a0a0a7; --accent:#81d0ff; - --accent2:#3584e4; + --accent2:#3685e4; /* a hair lighter so the badge's dark count clears AA */ --ink:#1d1d20; --good:#78e9ab; --warn:#ffc252; @@ -141,7 +141,7 @@ --dim:#57575d; --faint:#66666c; --accent:#0461be; - --accent2:#3584e4; + --accent2:#1c71d8; /* blue 4, a step down from the accent blue, so white on it clears AA */ --ink:#ffffff; --good:#00753a; --warn:#905400; @@ -177,7 +177,7 @@ --dim:#5c616c; /* fg */ --faint:#686d78; --accent:#0060f0; /* link */ - --accent2:#fd7d00; + --accent2:#bb5c00; /* the warning orange taken down until white on it clears AA */ --ink:#ffffff; --good:#23794f; --warn:#a85400; @@ -196,7 +196,7 @@ --dim:#3d3a33; --faint:#5a564c; --accent:#1a5fae; - --accent2:#b58900; + --accent2:#957100; /* taken down until white on it clears AA */ --ink:#ffffff; --good:#216609; --warn:#795a00; @@ -210,7 +210,7 @@ --panel:#3b4252; /* nord1 */ --panel2:#434c5e; /* nord2 */ --raise:#4c566a; /* nord3 */ - --line:#434c5e; + --line:#4c566a; /* nord3: nord2 is --panel2, and borders on it vanished */ --fg:#eceff4; /* nord6 */ --dim:#d8dee9; /* nord4 */ --faint:#b4bccb; @@ -232,7 +232,7 @@ --dim:#3b4252; /* nord1 */ --faint:#4c566a; /* nord3 */ --accent:#3a5e8a; - --accent2:#b0674e; + --accent2:#ab644c; --ink:#ffffff; --good:#446632; --warn:#7e590e; @@ -254,7 +254,7 @@ --accent2:#2a5db0; --ink:#ffffff; --good:#237a23; - --warn:#a15f00; + --warn:#9b5b00; --bad:#c42b1c; --shadow:0 4px 16px rgba(0,0,0,.28); } @@ -428,9 +428,11 @@ input:focus,select:focus{outline:0;border-color:var(--accent)} .tile .txt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-weight:500;font-size:13px;line-height:1.3} .tile .txt small{display:block;color:var(--faint);font-size:11.5px} .tile:hover .txt b{color:var(--accent)} +/* Outlined, not filled: on --raise the warning and error colours fell short of AA in most light + themes, where on the row's own ground they clear it. */ .tag{ font-size:11px;font-weight:600; - padding:1px 5px;border-radius:4px;background:var(--raise);color:var(--warn);flex:none; + padding:0 4px;border-radius:4px;border:1px solid;color:var(--warn);flex:none; } .art{ border-radius:7px;object-fit:cover;background:var(--raise);flex:none; @@ -451,6 +453,8 @@ input:focus,select:focus{outline:0;border-color:var(--accent)} font-size:11px;font-weight:600;flex:none;min-width:26px;text-align:center; } .badge.zero{background:var(--raise);color:var(--faint)} +/* A selected row is --raise too, and the zero count's pill vanished into it. */ +.sel .badge.zero{background:var(--bg)} /* Counts, sizes and times that change in place should not jiggle the text around them. */ .badge,.feed small,.childrow small,.tile small,.ep,.fhead .sub,.dmeta,#status,#seekrow{font-variant-numeric:tabular-nums} @@ -845,7 +849,8 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu :root[data-theme="classic"] .ep.sel .st, :root[data-theme="classic"] .ep.sel .fl, :root[data-theme="classic"] .ep.sel .file, -:root[data-theme="classic"] .ep.sel .kind{color:#fff} +:root[data-theme="classic"] .ep.sel .kind, +:root[data-theme="classic"] .ep.sel .iconbtn:not(:hover){color:#fff} /* Green and red stay green and red on the blue, just lighter so they read. */ :root[data-theme="classic"] .ep.sel .kind.here{color:#a6f3a6} :root[data-theme="classic"] .ep.sel .kind.bad{color:#ffb8ad} diff --git a/web/login.html b/web/login.html index bf0c153..848f014 100644 --- a/web/login.html +++ b/web/login.html @@ -1,3 +1,8 @@ + + + + + Sign in — iPodderX @@ -22,7 +27,8 @@ --shadow:0 8px 28px rgba(6,10,16,.55); --r:10px; } -:root[data-theme="light"] { +/* Signed out, there is no account to take a theme from, so this follows the system. */ +@media (prefers-color-scheme:light){:root { --bg:#f2f4f7; --panel:#ffffff; /* #FFFFFF device body */ --panel2:#e9edf3; @@ -30,15 +36,15 @@ --line:#d6d6d6; /* #D6D6D6 device edge */ --fg:#1a1a1a; /* #1A1A1A icon outline */ --dim:#606060; /* #606060 */ - --faint:#767676; /* between the icon's #929292 and #606060, to clear AA */ + --faint:#6b6b6b; --accent:#2d5391; /* #2D5391 the deep screen blue reads better on white */ - --accent2:#b06f10; + --accent2:#985e0a; --ink:#ffffff; --good:#2f7d4f; - --warn:#b06f10; + --warn:#985e0a; --bad:#b3402f; --shadow:0 8px 28px rgba(45,83,145,.14); -} +}} *{box-sizing:border-box} html,body{height:100%} body{ diff --git a/web/src/theme.ts b/web/src/theme.ts index d193713..6b36d2b 100644 --- a/web/src/theme.ts +++ b/web/src/theme.ts @@ -6,7 +6,7 @@ // the system, so no palette is written twice. const THEMES: Record = { modern: {name: 'Modern', modes: true}, - classic: {name: 'Classic, the 2004 Mac app', modes: false}, + classic: {name: 'Classic', modes: false}, dracula: {name: 'Dracula', modes: true}, material: {name: 'Material', modes: true}, adwaita: {name: 'Adwaita', modes: true}, diff --git a/web/src/util.ts b/web/src/util.ts index f80431f..f1a0088 100644 --- a/web/src/util.ts +++ b/web/src/util.ts @@ -26,7 +26,6 @@ const ICON={ trash:fa('0 0 448 512',''), // solid/trash-can open:fa('0 0 512 512',''), // solid/arrow-up-right-from-square settings:fa('0 0 512 512',''), // solid/gear - log:fa('0 0 384 512',''), // solid/file-lines close:fa('0 0 384 512',''), // solid/xmark menu:fa('0 0 448 512',''), // solid/bars directory:fa('0 0 448 512',''), // solid/table-list @@ -40,7 +39,6 @@ const ICON={ torrent:fa('0 0 448 512',''), // solid/magnet file:fa('0 0 384 512',''), // solid/file copy:fa('0 0 448 512',''), // solid/copy - users:fa('0 0 640 512',''), // solid/users signout:fa('0 0 512 512',''), // solid/right-from-bracket back:fa('0 0 512 512',''), // solid/rotate-left fwd:fa('0 0 512 512',''), // solid/rotate-right