From bff6f4cc017629cbeeec3d9983b891cbe1913e8b Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Fri, 20 Feb 2026 17:00:26 +0100 Subject: [PATCH] Fix the style of the thumbnails in HCM (bug 2016491, bug 2016321, bug 2016323, bug 2016827) --- web/views_manager.css | 105 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 96 insertions(+), 9 deletions(-) diff --git a/web/views_manager.css b/web/views_manager.css index 60b320df3..5023eba10 100644 --- a/web/views_manager.css +++ b/web/views_manager.css @@ -94,8 +94,13 @@ --image-current-focused-outline-color: var(--image-hover-border-color); --image-page-number-bg: light-dark(#f0f0f4, #23222b); --image-page-number-fg: var(--text-color); + --image-page-number-border-color: transparent; + --image-hover-page-number-bg: var(--image-page-number-bg); + --image-hover-page-number-fg: var(--image-page-number-fg); --image-current-page-number-bg: var(--image-current-border-color); --image-current-page-number-fg: light-dark(#fff, #15141a); + --image-current-hover-page-number-bg: var(--image-current-page-number-bg); + --image-current-hover-page-number-fg: var(--image-current-page-number-fg); --image-shadow: 0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 0 0 1px var(--image-border-color), @@ -122,6 +127,7 @@ calc(3 * var(--image-border-width) / 2) var(--image-current-border-color); --image-dragging-shadow: 0 0 0 var(--image-border-width) var(--image-current-border-color); + --multiple-dragging-indicator-bg: var(--indicator-color); --multiple-dragging-text-color: light-dark(#fbfbfe, #15141a); @media screen and (forced-colors: active) { @@ -145,15 +151,24 @@ --status-warning-bg: none; --indicator-warning-color: CanvasText; --header-shadow: none; - --image-shadow: 0 0 0 1px CanvasText; - --image-outline: 1px solid CanvasText; - --image-border-color: CanvasText; + --image-shadow: none; + --image-outline: 1px solid ButtonText; + --image-focus-outline-color: CanvasText; --image-hover-border-color: SelectedItem; - --image-current-border-color: ButtonBorder; + --image-hover-page-number-bg: SelectedItemText; + --image-hover-page-number-fg: SelectedItem; + --image-current-page-number-bg: ButtonText; + --image-current-page-number-fg: ButtonFace; + --image-current-border-color: ButtonText; --image-current-focused-outline-color: var(--image-hover-border-color); + --image-current-hover-page-number-bg: SelectedItem; + --image-current-hover-page-number-fg: SelectedItemText; --image-page-number-bg: ButtonFace; - --image-page-number-fg: CanvasText; + --image-page-number-fg: ButtonText; + --image-page-number-border-color: var(--image-page-number-fg); --multiple-dragging-bg: Canvas; + --multiple-dragging-indicator-bg: ButtonBorder; + --multiple-dragging-text-color: Canvas; } display: flex; @@ -605,6 +620,7 @@ &:not(.isDragging) > .thumbnailImageContainer::after { content: attr(page-number); border-radius: 8px; + border: 1px solid var(--image-page-number-border-color); background-color: var(--image-page-number-bg); color: var(--image-page-number-fg); position: absolute; @@ -613,10 +629,11 @@ min-width: 32px; height: 16px; text-align: center; + box-sizing: content-box; translate: calc(var(--dir-factor) * 50%); font: menu; - font-size: 13px; + font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; @@ -629,6 +646,7 @@ > .thumbnailImageContainer::after { background-color: var(--image-current-page-number-bg); color: var(--image-current-page-number-fg); + outline: 1px solid var(--image-current-border-color); } &.isDragging > input { @@ -654,8 +672,8 @@ img { width: 100%; height: 100%; - border: inherit; - border-radius: inherit; + border: none; + border-radius: 8px; outline: none; user-select: none; pointer-events: none; @@ -668,23 +686,87 @@ &:hover { cursor: pointer; box-shadow: var(--image-hover-shadow); + + &::after { + background-color: var(--image-hover-page-number-bg); + color: var(--image-hover-page-number-fg); + } + + @media screen and (forced-colors: active) { + /* box-shadow isn't rendered in HCM */ + box-shadow: none; + outline: var(--image-border-width) var(--image-hover-border-color) + solid; + } } &:focus-visible { &:not([aria-current="page"]) { box-shadow: var(--image-hover-shadow); outline: none; + + @media screen and (forced-colors: active) { + /* box-shadow isn't rendered in HCM */ + box-shadow: none; + outline: var(--image-border-width) + var(--image-focus-outline-color) solid; + } } &[aria-current="page"] { outline: var(--image-border-width) solid var(--image-current-focused-outline-color); outline-offset: var(--image-border-width); + + @media screen and (forced-colors: active) { + /* box-shadow isn't rendered in HCM */ + box-shadow: none; + outline: var(--image-border-width) + var(--image-current-border-color) solid; + outline-offset: 0; + + > img { + outline: var(--image-border-width) + var(--image-focus-outline-color) solid; + outline-offset: var(--image-border-width); + } + } + } + + @media screen and (forced-colors: active) { + /* box-shadow isn't rendered in HCM */ + box-shadow: none; + outline: var(--image-border-width) + var(--image-current-border-color) solid; + + &:hover > img { + outline: var(--image-border-width) + var(--image-hover-border-color) solid; + outline-offset: var(--image-border-width); + } } } &[aria-current="page"] { box-shadow: var(--image-current-shadow); + + &:hover::after { + background-color: var(--image-current-hover-page-number-bg); + color: var(--image-current-hover-page-number-fg); + } + + @media screen and (forced-colors: active) { + /* box-shadow isn't rendered in HCM */ + box-shadow: none; + outline: var(--image-border-width) + var(--image-current-border-color) solid; + + &:hover > img { + outline: var(--image-border-width) + var(--image-hover-border-color) solid; + outline-offset: var(--image-border-width); + } + } } &.placeholder { @@ -705,6 +787,11 @@ &.multiple { box-shadow: var(--image-multiple-dragging-shadow); + @media screen and (forced-colors: active) { + forced-color-adjust: none; + box-shadow: var(--image-multiple-dragging-shadow); + } + > .thumbnailImageContainer { position: absolute; top: 0; @@ -721,7 +808,7 @@ &::after { content: attr(data-multiple-count); border-radius: calc(8px * var(--thumbnail-dragging-scale)); - background-color: var(--indicator-color); + background-color: var(--multiple-dragging-indicator-bg); color: var(--multiple-dragging-text-color); position: absolute; inset-block-end: calc(4px * var(--thumbnail-dragging-scale));