From 07cd7cb3dce4a4af1d555002486c15a5ed4b5302 Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Wed, 14 Sep 2022 18:58:26 +0200 Subject: [PATCH] Improve CSS for HCM (bug 1726183) The default outline for a focused text input is not that bad but for any reason when changing the background color, all the good default border/outline properties are lost (it's the same behaviour in Edge). So in order have something consistent in HCM/non-HCM, a 2px-border+1px-outline (on @MReschenberg advices) is added when an input is focused with different colors depending on HCM. While working on the above issue, I noticed few bugs I fixed when in HCM: - input, button and select have some default properties which have been created at a time where annotation layer didn't exist, hence this patch remove them and set those properties where they should live; - some elements (like the main toolbar) is using a box-shadow which is invisible in HCM, hence it's replaced by a border-bottom in HCM; - some separators are invisible in HCM, hence use GrayText color to render them correctly; - the options for the zoom selection were invisible in HCM with Desert (one of the Windows 11 themes). --- web/annotation_layer_builder.css | 36 ++++++++++++++++----- web/viewer.css | 55 +++++++++++++++++++++++++------- web/xfa_layer_builder.css | 12 +++++-- 3 files changed, 82 insertions(+), 21 deletions(-) diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css index 75db1dc2b..e92e44b5b 100644 --- a/web/annotation_layer_builder.css +++ b/web/annotation_layer_builder.css @@ -15,9 +15,20 @@ :root { --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); + --input-focus-border-color: Highlight; + --input-focus-outline: 1px solid Canvas; + --input-unfocused-border-color: transparent; + --input-disabled-border-color: transparent; + --input-hover-border-color: black; } @media (forced-colors: active) { + :root { + --input-focus-border-color: CanvasText; + --input-unfocused-border-color: ActiveText; + --input-disabled-border-color: GrayText; + --input-hover-border-color: Highlight; + } .annotationLayer .textWidgetAnnotation input:required, .annotationLayer .textWidgetAnnotation textarea:required, .annotationLayer .choiceWidgetAnnotation select:required, @@ -78,7 +89,7 @@ .annotationLayer .buttonWidgetAnnotation.checkBox input, .annotationLayer .buttonWidgetAnnotation.radioButton input { background-image: var(--annotation-unfocused-field-background); - border: 1px solid transparent; + border: 2px solid var(--input-unfocused-border-color); box-sizing: border-box; font: calc(9px * var(--scale-factor)) sans-serif; height: 100%; @@ -113,7 +124,7 @@ .annotationLayer .buttonWidgetAnnotation.checkBox input[disabled], .annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] { background: none; - border: 1px solid transparent; + border: 2px solid var(--input-disabled-border-color); cursor: not-allowed; } @@ -122,24 +133,33 @@ .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover, .annotationLayer .buttonWidgetAnnotation.radioButton input:hover { - border: 1px solid rgba(0, 0, 0, 1); + border: 2px solid var(--input-hover-border-color); } .annotationLayer .textWidgetAnnotation input:focus, .annotationLayer .textWidgetAnnotation textarea:focus, .annotationLayer .choiceWidgetAnnotation select:focus { background: none; - border: 1px solid transparent; + border: 2px solid var(--input-focus-border-color); + border-radius: 2px; + outline: var(--input-focus-outline); } -.annotationLayer .textWidgetAnnotation input :focus, -.annotationLayer .textWidgetAnnotation textarea :focus, -.annotationLayer .choiceWidgetAnnotation select :focus, .annotationLayer .buttonWidgetAnnotation.checkBox :focus, .annotationLayer .buttonWidgetAnnotation.radioButton :focus { background-image: none; background-color: transparent; - outline: auto; +} + +.annotationLayer .buttonWidgetAnnotation.checkBox :focus { + border: 2px solid var(--input-focus-border-color); + border-radius: 2px; + outline: var(--input-focus-outline); +} + +.annotationLayer .buttonWidgetAnnotation.radioButton :focus { + border: 2px solid var(--input-focus-border-color); + outline: var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before, diff --git a/web/viewer.css b/web/viewer.css index 160587173..d41ea6f3a 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -45,11 +45,18 @@ --sidebar-toolbar-bg-color: rgba(245, 246, 247, 1); --toolbar-bg-color: rgba(249, 249, 250, 1); --toolbar-border-color: rgba(204, 204, 204, 1); + --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color); + --toolbar-border-bottom: none; + --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 + rgba(0, 0, 0, 0.25), + 0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1); + --toolbarSidebar-border-bottom: none; --button-hover-color: rgba(221, 222, 223, 1); --toggled-btn-color: rgba(0, 0, 0, 1); --toggled-btn-bg-color: rgba(0, 0, 0, 0.3); --toggled-hover-active-btn-color: rgba(0, 0, 0, 0.4); --dropdown-btn-bg-color: rgba(215, 215, 219, 1); + --dropdown-btn-border: none; --separator-color: rgba(0, 0, 0, 0.3); --field-color: rgba(6, 6, 6, 1); --field-bg-color: rgba(255, 255, 255, 1); @@ -170,6 +177,9 @@ --toolbar-icon-opacity: 1; --toolbar-icon-bg-color: ButtonText; --toolbar-icon-hover-bg-color: ButtonFace; + --toolbar-border-color: CanvasText; + --toolbar-border-bottom: 1px solid var(--toolbar-border-color); + --toolbar-box-shadow: none; --toggled-btn-color: HighlightText; --toggled-btn-bg-color: LinkText; --doorhanger-hover-color: ButtonFace; @@ -178,7 +188,13 @@ --dialog-button-border: 1px solid Highlight; --dialog-button-hover-bg-color: Highlight; --dialog-button-hover-color: ButtonFace; + --dropdown-btn-border: 1px solid ButtonText; --field-border-color: ButtonText; + --main-color: CanvasText; + --separator-color: GrayText; + --doorhanger-separator-color: GrayText; + --toolbarSidebar-box-shadow: none; + --toolbarSidebar-border-bottom: 1px solid var(--toolbar-border-color); } } @@ -195,14 +211,6 @@ body { body { background-color: var(--body-bg-color); -} - -body, -input, -button, -select { - font: message-box; - outline: none; scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); } @@ -248,6 +256,7 @@ select { width: var(--sidebar-width); visibility: hidden; z-index: 100; + font: message-box; border-top: 1px solid rgba(51, 51, 51, 1); border-inline-end: var(--doorhanger-border-color-whcm); transition-property: inset-inline-start; @@ -308,6 +317,26 @@ select { right: 0; z-index: 9999; cursor: default; + font: message-box; +} + +.toolbar input, +.toolbar button, +.toolbar select, +.secondaryToolbar input, +.secondaryToolbar button, +.secondaryToolbar select, +.editorParamsToolbar input, +.editorParamsToolbar button, +.editorParamsToolbar select, +.findbar input, +.findbar button, +.findbar select, +#sidebarContainer input, +#sidebarContainer button, +#sidebarContainer select { + outline: none; + font: message-box; } #toolbarContainer { @@ -318,8 +347,8 @@ select { width: 100%; height: 32px; background-color: var(--sidebar-toolbar-bg-color); - box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgba(0, 0, 0, 0.25), - 0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: var(--toolbarSidebar-box-shadow); + border-bottom: var(--toolbarSidebar-border-bottom); } #sidebarResizer { @@ -339,7 +368,8 @@ select { position: relative; height: 32px; background-color: var(--toolbar-bg-color); - box-shadow: 0 1px 0 var(--toolbar-border-color); + box-shadow: var(--toolbar-box-shadow); + border-bottom: var(--toolbar-border-bottom); } #toolbarViewer { @@ -423,6 +453,7 @@ select { height: auto; padding: 0 4px; margin: 4px 2px; + font: message-box; font-size: 12px; line-height: 14px; text-align: left; @@ -770,6 +801,7 @@ select { padding: 0; overflow: hidden; background-color: var(--dropdown-btn-bg-color); + border: var(--dropdown-btn-border); } .dropdownToolbarButton::after { top: 6px; @@ -1308,6 +1340,7 @@ dialog { padding: 15px; border-spacing: 4px; color: var(--main-color); + font: message-box; font-size: 12px; line-height: 14px; background-color: var(--doorhanger-bg-color); diff --git a/web/xfa_layer_builder.css b/web/xfa_layer_builder.css index 8c97c84c2..7ed2f3b21 100644 --- a/web/xfa_layer_builder.css +++ b/web/xfa_layer_builder.css @@ -15,14 +15,22 @@ :root { --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); + --xfa-focus-outline: auto; } @media (forced-colors: active) { + :root { + --xfa-focus-outline: 2px solid CanvasText; + } .xfaLayer *:required { outline: 1.5px solid selectedItem; } } +.xfaLayer { + background-color: transparent; +} + .xfaLayer .highlight { margin: -1px; padding: 1px; @@ -196,13 +204,13 @@ .xfaSelect:focus { background-image: none; background-color: transparent; - outline: auto; + outline: var(--xfa-focus-outline); outline-offset: -1px; } .xfaCheckbox:focus, .xfaRadio:focus { - outline: auto; + outline: var(--xfa-focus-outline); } .xfaTextfield,