Skip to content

Commit

Permalink
Merge pull request mozilla#17195 from Snuffleupagus/textLayer-css-nes…
Browse files Browse the repository at this point in the history
…ting

Use CSS nesting in the textLayer
  • Loading branch information
Snuffleupagus authored Oct 27, 2023
2 parents 6115a32 + 525be9a commit d30bf44
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 83 deletions.
27 changes: 14 additions & 13 deletions test/text_layer_test.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,19 @@
inset: 0;
line-height: 1;
opacity: 1;
}
.textLayer :is(span, br) {
color: black;
position: absolute;
white-space: pre;
transform-origin: 0% 0%;
border: solid 1px rgb(255 0 0 / 0.5);
background-color: rgb(255 255 32 / 0.1);
box-sizing: border-box;
}

.textLayer .markedContent {
border: none;
background-color: transparent;
:is(span, br) {
color: black;
position: absolute;
white-space: pre;
transform-origin: 0% 0%;
border: solid 1px rgb(255 0 0 / 0.5);
background-color: rgb(255 255 32 / 0.1);
box-sizing: border-box;
}

.markedContent {
border: none;
background-color: transparent;
}
}
136 changes: 66 additions & 70 deletions web/text_layer_builder.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,6 @@
* limitations under the License.
*/

:root {
--highlight-bg-color: rgb(180 0 170);
--highlight-selected-bg-color: rgb(0 100 0);
}

@media screen and (forced-colors: active) {
:root {
--highlight-bg-color: Highlight;
--highlight-selected-bg-color: ButtonText;
}
}

.textLayer {
position: absolute;
text-align: initial;
Expand All @@ -36,75 +24,83 @@
forced-color-adjust: none;
transform-origin: 0 0;
z-index: 2;
}

.textLayer :is(span, br) {
color: transparent;
position: absolute;
white-space: pre;
cursor: text;
transform-origin: 0% 0%;
}
:is(span, br) {
color: transparent;
position: absolute;
white-space: pre;
cursor: text;
transform-origin: 0% 0%;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
* the problem doesn't show up in "text" reference tests. */
/*#if !MOZCENTRAL*/
.textLayer span.markedContent {
top: 0;
height: 0;
}
/*#endif*/
/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
* the problem doesn't show up in "text" reference tests. */
/*#if !MOZCENTRAL*/
span.markedContent {
top: 0;
height: 0;
}
/*#endif*/

.textLayer .highlight {
margin: -1px;
padding: 1px;
background-color: var(--highlight-bg-color);
border-radius: 4px;
}
.highlight {
--highlight-bg-color: rgb(180 0 170);
--highlight-selected-bg-color: rgb(0 100 0);

.textLayer .highlight.appended {
position: initial;
}
@media screen and (forced-colors: active) {
--highlight-bg-color: Highlight;
--highlight-selected-bg-color: ButtonText;
}

.textLayer .highlight.begin {
border-radius: 4px 0 0 4px;
}
margin: -1px;
padding: 1px;
background-color: var(--highlight-bg-color);
border-radius: 4px;

.textLayer .highlight.end {
border-radius: 0 4px 4px 0;
}
&.appended {
position: initial;
}

.textLayer .highlight.middle {
border-radius: 0;
}
&.begin {
border-radius: 4px 0 0 4px;
}

.textLayer .highlight.selected {
background-color: var(--highlight-selected-bg-color);
}
&.end {
border-radius: 0 4px 4px 0;
}

&.middle {
border-radius: 0;
}

&.selected {
background-color: var(--highlight-selected-bg-color);
}
}

::selection {
/*#if !MOZCENTRAL*/
background: blue;
/*#endif*/
background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
}

.textLayer ::selection {
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
/*#if !MOZCENTRAL*/
background: blue;
br::selection {
background: transparent;
}
/*#endif*/
background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
/*#if !MOZCENTRAL*/
.textLayer br::selection {
background: transparent;
}
/*#endif*/
.endOfContent {
display: block;
position: absolute;
inset: 100% 0 0;
z-index: -1;
cursor: default;
user-select: none;

.textLayer .endOfContent {
display: block;
position: absolute;
inset: 100% 0 0;
z-index: -1;
cursor: default;
user-select: none;
}

.textLayer .endOfContent.active {
top: 0;
&.active {
top: 0;
}
}
}

0 comments on commit d30bf44

Please sign in to comment.