fix(android): no disc behind an entry icon
The translucent circle exists to back the initials of an entry without an icon. A favicon brings its own transparency, so the circle showed through and around it - a saucer under the drawing, plainly visible on the Gitea cup. The circle is dropped as soon as the row carries an image, through a class on the avatar rather than :has() so it does not depend on how new the engine is. object-fit also goes from cover to contain: an icon is not a photograph and has no business being cropped. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -118,7 +118,13 @@
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 600; font-size: 16px; overflow: hidden;
|
||||
}
|
||||
.av img { width: 100%; height: 100%; object-fit: cover; }
|
||||
/* PAS DE PASTILLE SOUS UNE ICONE. Le rond translucide sert de fond aux
|
||||
initiales ; une favicon a son propre fond transparent, et le rond se
|
||||
voyait donc au travers et autour d'elle - une soucoupe sous le dessin.
|
||||
`contain` plutot que `cover` : une icone n'est pas une photo, on ne la
|
||||
recadre pas. */
|
||||
.av.has-img { background: none; }
|
||||
.av img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.txt { flex: 1; min-width: 0; }
|
||||
.txt b { display: block; font-weight: 500; overflow: hidden;
|
||||
text-overflow: ellipsis; white-space: nowrap; }
|
||||
@@ -371,7 +377,7 @@ function renderRows() {
|
||||
if (!matches(e)) continue;
|
||||
shown++;
|
||||
html += '<div class="row" data-i="' + e.i + '">'
|
||||
+ '<div class="av">'
|
||||
+ '<div class="av' + (e.icon ? ' has-img' : '') + '">'
|
||||
+ (e.icon ? '<img src="' + esc(e.icon) + '">' : esc(e.initial))
|
||||
+ '</div>'
|
||||
+ '<div class="txt"><b>' + esc(e.name) + '</b>'
|
||||
|
||||
Reference in New Issue
Block a user