Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Introduce some :is usage in the annotationLayer CSS

Browse Source 
While this slightly reduces duplication in the CSS rules, some of the auto-formatting done by Prettier is perhaps not great. (Given the overall advantage of using Prettier, we'll probably have to simply accept this.)
This commit is contained in:
Jonas Jenwald 2023-04-18 12:42:13 +02:00
parent f1b005d7b8
commit fcc535706a
2 changed files with 30 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
test/annotation_layer_builder_overrides.css
View File

@ -25,26 +25,22 @@
position: absolute; position: absolute;
} }
.annotationLayer .buttonWidgetAnnotation.checkBox input, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
.annotationLayer .buttonWidgetAnnotation.radioButton input {
-webkit-appearance: none; -webkit-appearance: none;
} }
.annotationLayer .linkAnnotation > a, .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a,
.annotationLayer .buttonWidgetAnnotation.pushButton > a,
.annotationLayer .popupTriggerArea { .annotationLayer .popupTriggerArea {
opacity: 0.2; opacity: 0.2;
background: rgba(255, 255, 0, 1); background: rgba(255, 255, 0, 1);
box-shadow: 0 2px 10px rgba(255, 255, 0, 1); box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
} }
.annotationLayer .popupAnnotation, .annotationLayer :is(.popupAnnotation, .popupWrapper) {
.annotationLayer .popupWrapper {
display: block; display: block;
} }
.annotationLayer .popup h1, .annotationLayer .popup :is(h1, p) {
.annotationLayer .popup p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }

58
web/annotation_layer_builder.css
View File

@ -31,11 +31,11 @@
--input-hover-border-color: Highlight; --input-hover-border-color: Highlight;
--link-outline: 1.5px solid LinkText; --link-outline: 1.5px solid LinkText;
} }
.annotationLayer .textWidgetAnnotation input:required, .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .textWidgetAnnotation textarea:required,
.annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation.checkBox input:required, .annotationLayer
.annotationLayer .buttonWidgetAnnotation.radioButton input:required { .buttonWidgetAnnotation:is(.checkBox, .radioButton)
input:required {
outline: 1.5px solid selectedItem; outline: 1.5px solid selectedItem;
} }
@ -81,8 +81,7 @@
outline: var(--link-outline); outline: var(--link-outline);
} }
.annotationLayer .linkAnnotation > a, .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
.annotationLayer .buttonWidgetAnnotation.pushButton > a {
position: absolute; position: absolute;
font-size: 1em; font-size: 1em;
top: 0; top: 0;
@ -91,8 +90,9 @@
height: 100%; height: 100%;
} }
.annotationLayer .linkAnnotation > a:hover, .annotationLayer
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover { :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton)
> a:hover {
opacity: 0.2; opacity: 0.2;
background: rgba(255, 255, 0, 1); background: rgba(255, 255, 0, 1);
box-shadow: 0 2px 10px rgba(255, 255, 0, 1); box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
@ -107,11 +107,9 @@
left: 0; left: 0;
} }
.annotationLayer .textWidgetAnnotation input, .annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select, .annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation.checkBox input, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
.annotationLayer .buttonWidgetAnnotation.radioButton input {
background-image: var(--annotation-unfocused-field-background); background-image: var(--annotation-unfocused-field-background);
border: 2px solid var(--input-unfocused-border-color); border: 2px solid var(--input-unfocused-border-color);
box-sizing: border-box; box-sizing: border-box;
@ -122,11 +120,11 @@
width: 100%; width: 100%;
} }
.annotationLayer .textWidgetAnnotation input:required, .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .textWidgetAnnotation textarea:required,
.annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation.checkBox input:required, .annotationLayer
.annotationLayer .buttonWidgetAnnotation.radioButton input:required { .buttonWidgetAnnotation:is(.checkBox, .radioButton)
input:required {
outline: 1.5px solid red; outline: 1.5px solid red;
} }
@ -142,32 +140,30 @@
resize: none; resize: none;
} }
.annotationLayer .textWidgetAnnotation input[disabled], .annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .textWidgetAnnotation textarea[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled], .annotationLayer
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] { .buttonWidgetAnnotation:is(.checkBox, .radioButton)
input[disabled] {
background: none; background: none;
border: 2px solid var(--input-disabled-border-color); border: 2px solid var(--input-disabled-border-color);
cursor: not-allowed; cursor: not-allowed;
} }
.annotationLayer .textWidgetAnnotation input:hover, .annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover, .annotationLayer
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover { .buttonWidgetAnnotation:is(.checkBox, .radioButton)
input:hover {
border: 2px solid var(--input-hover-border-color); border: 2px solid var(--input-hover-border-color);
} }
.annotationLayer .textWidgetAnnotation input:hover, .annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover { .annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
border-radius: 2px; border-radius: 2px;
} }
.annotationLayer .textWidgetAnnotation input:focus, .annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .textWidgetAnnotation textarea:focus,
.annotationLayer .choiceWidgetAnnotation select:focus { .annotationLayer .choiceWidgetAnnotation select:focus {
background: none; background: none;
border: 2px solid var(--input-focus-border-color); border: 2px solid var(--input-focus-border-color);
@ -175,8 +171,7 @@
outline: var(--input-focus-outline); outline: var(--input-focus-outline);
} }
.annotationLayer .buttonWidgetAnnotation.checkBox :focus, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
} }
@ -240,8 +235,7 @@
width: 103%; width: 103%;
} }
.annotationLayer .buttonWidgetAnnotation.checkBox input, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
.annotationLayer .buttonWidgetAnnotation.radioButton input {
appearance: none; appearance: none;
} }