Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-19 19:25:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Email reader: theme-aware override for Gmail drive/attachment chips

Browse Source 
Gmail composer chips arrive with inline border:1px solid #ddd + an
assumed white background, so on dark themes they read as a barely-
visible white box with the filename invisible. Override .gmail_chip /
.gmail_drive_chip inside .email-reader-body:

- Strip inline width:386px / height:20px (use auto + max-width:100%),
- Re-flow as inline-flex with a 6px gap so icon + filename align.
- Background tinted with var(--fg) 4%, border = var(--border).
- Anchor uses var(--accent) and the filename span uses var(--fg) so
  text is always legible regardless of theme.
- Icon img clamped to 16x16.
This commit is contained in:
pewdiepie-archdaemon
2026-06-10 23:17:18 +09:00
parent cd9ad1a7f2
commit 1638db9c86
1 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+44
View File
@@ -27971,6 +27971,50 @@ button .spinner-whirlpool {
}
.email-reader-body.html-body img { max-width: 100%; height: auto; }
.email-reader-body.html-body table { max-width: 100%; border-collapse: collapse; }
/* Gmail Drive chips arrive with inline width/height/border/padding from
Gmail's composer (border:1px solid #ddd, white-ish bg assumed). On a
dark theme that reads as a near-invisible white box. Override with a
theme-aware chip surface so the filename + icon stay visible. */
.email-reader-body .gmail_chip,
.email-reader-body .gmail_drive_chip {
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px;
padding: 6px 10px !important;
margin: 6px 0 !important;
border: 1px solid var(--border) !important;
border-radius: 6px;
background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.email-reader-body .gmail_chip:hover,
.email-reader-body .gmail_drive_chip:hover {
border-color: color-mix(in srgb, var(--accent, var(--red)) 45%, var(--border)) !important;
background: color-mix(in srgb, var(--accent, var(--red)) 6%, transparent);
}
.email-reader-body .gmail_chip a,
.email-reader-body .gmail_drive_chip a {
color: var(--accent, var(--red)) !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
max-width: 100% !important;
}
.email-reader-body .gmail_chip a > span,
.email-reader-body .gmail_drive_chip a > span {
color: var(--fg) !important;
font-size: 12px;
}
.email-reader-body .gmail_chip img,
.email-reader-body .gmail_drive_chip img {
width: 16px !important;
height: 16px !important;
padding-right: 0 !important;
filter: none;
}
/* Preserve highlights — sender's intent (snark, callouts) gets through, but
rendered with a theme-aware accent so it stays legible in any theme. The
sanitizer rewrites `<span style="background:yellow">…</span>` to <mark>. */