Merge pull request #15438 from calixteman/1726183
Improve CSS for HCM (bug 1726183)
This commit is contained in:
calixteman
GitHub
commit
dc6c3eacbc
@ -15,9 +15,20 @@
|
||||
|
||||
:root {
|
||||
--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
|
||||
--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,
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -15,14 +15,22 @@
|
||||
|
||||
:root {
|
||||
--xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
|
||||
--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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user