mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-07 17:05:38 +02:00
64a0e59662
When selecting text, hovering over an element causes all the text between (according the the dom order) the current selection and that element to be selected. This means that when, while selecting, the cursor moves over a link, all the text in the page gets selected. Setting `user-select: none` on the link annotations would improve the situation, but it still makes it impossible to extend the selection within a link without using Shift+arrows keys on the keyboard. This commit fixes the problem by setting `pointer-events: none` on the `<section>`s in the annotation layer while selecting some text. This way, they are ignored for hit-testing and do not affect selection. It is still impossible to _start_ a selection inside a link, as the link text is covered by the link annotation. Fixes #18266
126 lines
3 KiB
CSS
126 lines
3 KiB
CSS
/* Copyright 2014 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
.textLayer {
|
|
position: absolute;
|
|
text-align: initial;
|
|
inset: 0;
|
|
overflow: clip;
|
|
opacity: 1;
|
|
line-height: 1;
|
|
text-size-adjust: none;
|
|
forced-color-adjust: none;
|
|
transform-origin: 0 0;
|
|
caret-color: CanvasText;
|
|
z-index: 0;
|
|
|
|
&.highlighting {
|
|
touch-action: none;
|
|
}
|
|
|
|
:is(span, br) {
|
|
color: transparent;
|
|
position: absolute;
|
|
white-space: pre;
|
|
cursor: text;
|
|
transform-origin: 0% 0%;
|
|
}
|
|
|
|
> :not(.markedContent),
|
|
.markedContent span:not(.markedContent) {
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 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*/
|
|
|
|
.highlight {
|
|
--highlight-bg-color: rgb(180 0 170 / 0.25);
|
|
--highlight-selected-bg-color: rgb(0 100 0 / 0.25);
|
|
--highlight-backdrop-filter: none;
|
|
--highlight-selected-backdrop-filter: none;
|
|
|
|
@media screen and (forced-colors: active) {
|
|
--highlight-bg-color: transparent;
|
|
--highlight-selected-bg-color: transparent;
|
|
--highlight-backdrop-filter: var(--hcm-highlight-filter);
|
|
--highlight-selected-backdrop-filter: var(
|
|
--hcm-highlight-selected-filter
|
|
);
|
|
}
|
|
|
|
margin: -1px;
|
|
padding: 1px;
|
|
background-color: var(--highlight-bg-color);
|
|
backdrop-filter: var(--highlight-backdrop-filter);
|
|
border-radius: 4px;
|
|
|
|
&.appended {
|
|
position: initial;
|
|
}
|
|
|
|
&.begin {
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
|
|
&.end {
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
&.middle {
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--highlight-selected-bg-color);
|
|
backdrop-filter: var(--highlight-selected-backdrop-filter);
|
|
}
|
|
}
|
|
|
|
::selection {
|
|
/* stylelint-disable declaration-block-no-duplicate-properties */
|
|
/*#if !MOZCENTRAL*/
|
|
background: rgba(0 0 255 / 0.25);
|
|
/*#endif*/
|
|
/* stylelint-enable declaration-block-no-duplicate-properties */
|
|
background: color-mix(in srgb, AccentColor, transparent 75%);
|
|
}
|
|
|
|
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
|
|
/*#if !MOZCENTRAL*/
|
|
br::selection {
|
|
background: transparent;
|
|
}
|
|
/*#endif*/
|
|
|
|
.endOfContent {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 100% 0 0;
|
|
z-index: 0;
|
|
cursor: default;
|
|
user-select: none;
|
|
}
|
|
|
|
&.selecting .endOfContent {
|
|
top: 0;
|
|
}
|
|
}
|