2014-09-30 10:48:29 -05:00
|
|
|
/* 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;
|
2021-06-21 18:53:25 +02:00
|
|
|
text-align: initial;
|
2023-03-19 14:30:42 +01:00
|
|
|
inset: 0;
|
Fix flickering on text selection
When seleciting on a touch screen device, whenever the finger moves to a
blank area (so over `div.textLayer` directly rather than on a `<span>`),
the selection jumps to include all the text between the beginning of the
.textLayer and the selection side that is not being moved.
The existing selection flickering fix when using the mouse cannot be
trivially re-used on mobile, because when modifying a selection on
a touchscreen device Firefox will not emit any pointer event (and
Chrome will emit them inconsistently). Instead, we have to listen to the
'selectionchange' event.
The fix is different in Firefox and Chrome:
- on Firefox, we have to make sure that, when modifying the selection,
hovering on blank areas will hover on the .endOfContent element
rather than on the .textLayer element. This is done by adjusting the
z-indexes so that .endOfContent is above .textLayer.
- on Chrome, hovering on blank areas needs to trigger hovering on an
element that is either immediately after (or immediately before,
depending on which side of the selection the user is moving) the
currently selected text. This is done by moving the .endOfContent
element around between the correct `<span>`s in the text layer.
The new anti-flickering code is also used when selecting using a mouse:
the improvement in Firefox is only observable on multi-page selection,
while in Chrome it also affects selection within a single page.
After this commit, the `z-index`es inside .textLayer are as follows:
- .endOfContent has `z-index: 0`
- everything else has `z-index: 1`
- except for .markedContent, which have `z-index: 0`
and their contents have `z-index: 1`.
`.textLayer` has an explicit `z-index: 0` to introduce a new stacking context,
so that its contents are not drawn on top of `.annotationLayer`.
2024-04-11 12:50:57 +02:00
|
|
|
overflow: clip;
|
2024-01-18 18:36:03 +01:00
|
|
|
opacity: 1;
|
2015-12-02 23:00:12 +01:00
|
|
|
line-height: 1;
|
2021-11-06 11:39:43 +01:00
|
|
|
text-size-adjust: none;
|
2022-03-24 14:13:57 +01:00
|
|
|
forced-color-adjust: none;
|
2022-11-21 17:15:39 +01:00
|
|
|
transform-origin: 0 0;
|
2024-01-18 18:36:03 +01:00
|
|
|
caret-color: CanvasText;
|
Fix flickering on text selection
When seleciting on a touch screen device, whenever the finger moves to a
blank area (so over `div.textLayer` directly rather than on a `<span>`),
the selection jumps to include all the text between the beginning of the
.textLayer and the selection side that is not being moved.
The existing selection flickering fix when using the mouse cannot be
trivially re-used on mobile, because when modifying a selection on
a touchscreen device Firefox will not emit any pointer event (and
Chrome will emit them inconsistently). Instead, we have to listen to the
'selectionchange' event.
The fix is different in Firefox and Chrome:
- on Firefox, we have to make sure that, when modifying the selection,
hovering on blank areas will hover on the .endOfContent element
rather than on the .textLayer element. This is done by adjusting the
z-indexes so that .endOfContent is above .textLayer.
- on Chrome, hovering on blank areas needs to trigger hovering on an
element that is either immediately after (or immediately before,
depending on which side of the selection the user is moving) the
currently selected text. This is done by moving the .endOfContent
element around between the correct `<span>`s in the text layer.
The new anti-flickering code is also used when selecting using a mouse:
the improvement in Firefox is only observable on multi-page selection,
while in Chrome it also affects selection within a single page.
After this commit, the `z-index`es inside .textLayer are as follows:
- .endOfContent has `z-index: 0`
- everything else has `z-index: 1`
- except for .markedContent, which have `z-index: 0`
and their contents have `z-index: 1`.
`.textLayer` has an explicit `z-index: 0` to introduce a new stacking context,
so that its contents are not drawn on top of `.annotationLayer`.
2024-04-11 12:50:57 +02:00
|
|
|
z-index: 0;
|
2014-09-30 10:48:29 -05:00
|
|
|
|
2024-01-25 18:24:03 +01:00
|
|
|
&.highlighting {
|
2024-01-12 19:49:15 +01:00
|
|
|
touch-action: none;
|
|
|
|
}
|
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
:is(span, br) {
|
|
|
|
color: transparent;
|
|
|
|
position: absolute;
|
|
|
|
white-space: pre;
|
|
|
|
cursor: text;
|
|
|
|
transform-origin: 0% 0%;
|
|
|
|
}
|
2014-09-30 10:48:29 -05:00
|
|
|
|
Fix flickering on text selection
When seleciting on a touch screen device, whenever the finger moves to a
blank area (so over `div.textLayer` directly rather than on a `<span>`),
the selection jumps to include all the text between the beginning of the
.textLayer and the selection side that is not being moved.
The existing selection flickering fix when using the mouse cannot be
trivially re-used on mobile, because when modifying a selection on
a touchscreen device Firefox will not emit any pointer event (and
Chrome will emit them inconsistently). Instead, we have to listen to the
'selectionchange' event.
The fix is different in Firefox and Chrome:
- on Firefox, we have to make sure that, when modifying the selection,
hovering on blank areas will hover on the .endOfContent element
rather than on the .textLayer element. This is done by adjusting the
z-indexes so that .endOfContent is above .textLayer.
- on Chrome, hovering on blank areas needs to trigger hovering on an
element that is either immediately after (or immediately before,
depending on which side of the selection the user is moving) the
currently selected text. This is done by moving the .endOfContent
element around between the correct `<span>`s in the text layer.
The new anti-flickering code is also used when selecting using a mouse:
the improvement in Firefox is only observable on multi-page selection,
while in Chrome it also affects selection within a single page.
After this commit, the `z-index`es inside .textLayer are as follows:
- .endOfContent has `z-index: 0`
- everything else has `z-index: 1`
- except for .markedContent, which have `z-index: 0`
and their contents have `z-index: 1`.
`.textLayer` has an explicit `z-index: 0` to introduce a new stacking context,
so that its contents are not drawn on top of `.annotationLayer`.
2024-04-11 12:50:57 +02:00
|
|
|
> :not(.markedContent),
|
|
|
|
.markedContent span:not(.markedContent) {
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
/* 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*/
|
2021-10-29 14:32:13 +02:00
|
|
|
|
2024-09-04 16:45:09 +02:00
|
|
|
span[role="img"] {
|
|
|
|
user-select: none;
|
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
.highlight {
|
2024-01-18 18:36:03 +01:00
|
|
|
--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;
|
2014-09-30 10:48:29 -05:00
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
@media screen and (forced-colors: active) {
|
2024-01-18 18:36:03 +01:00
|
|
|
--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
|
|
|
|
);
|
2023-10-27 17:38:01 +02:00
|
|
|
}
|
2021-06-01 15:25:40 -07:00
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
margin: -1px;
|
|
|
|
padding: 1px;
|
|
|
|
background-color: var(--highlight-bg-color);
|
2024-01-18 18:36:03 +01:00
|
|
|
backdrop-filter: var(--highlight-backdrop-filter);
|
2023-10-27 17:38:01 +02:00
|
|
|
border-radius: 4px;
|
2014-09-30 10:48:29 -05:00
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
&.appended {
|
|
|
|
position: initial;
|
|
|
|
}
|
2014-09-30 10:48:29 -05:00
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
&.begin {
|
|
|
|
border-radius: 4px 0 0 4px;
|
|
|
|
}
|
2014-09-30 10:48:29 -05:00
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
&.end {
|
|
|
|
border-radius: 0 4px 4px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.middle {
|
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
background-color: var(--highlight-selected-bg-color);
|
2024-01-18 18:36:03 +01:00
|
|
|
backdrop-filter: var(--highlight-selected-backdrop-filter);
|
2023-10-27 17:38:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
::selection {
|
2024-07-13 16:20:22 +02:00
|
|
|
/* stylelint-disable declaration-block-no-duplicate-properties */
|
2023-10-27 17:38:01 +02:00
|
|
|
/*#if !MOZCENTRAL*/
|
2024-01-18 18:36:03 +01:00
|
|
|
background: rgba(0 0 255 / 0.25);
|
2023-10-27 17:38:01 +02:00
|
|
|
/*#endif*/
|
2024-07-13 16:20:22 +02:00
|
|
|
/* stylelint-enable declaration-block-no-duplicate-properties */
|
2024-01-18 18:36:03 +01:00
|
|
|
background: color-mix(in srgb, AccentColor, transparent 75%);
|
2023-10-27 17:38:01 +02:00
|
|
|
}
|
2023-01-12 13:56:34 -08:00
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
|
2022-09-19 19:23:17 +02:00
|
|
|
/*#if !MOZCENTRAL*/
|
2023-10-27 17:38:01 +02:00
|
|
|
br::selection {
|
|
|
|
background: transparent;
|
|
|
|
}
|
2022-09-19 19:23:17 +02:00
|
|
|
/*#endif*/
|
2015-11-03 14:20:34 -06:00
|
|
|
|
2023-10-27 17:38:01 +02:00
|
|
|
.endOfContent {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
inset: 100% 0 0;
|
Fix flickering on text selection
When seleciting on a touch screen device, whenever the finger moves to a
blank area (so over `div.textLayer` directly rather than on a `<span>`),
the selection jumps to include all the text between the beginning of the
.textLayer and the selection side that is not being moved.
The existing selection flickering fix when using the mouse cannot be
trivially re-used on mobile, because when modifying a selection on
a touchscreen device Firefox will not emit any pointer event (and
Chrome will emit them inconsistently). Instead, we have to listen to the
'selectionchange' event.
The fix is different in Firefox and Chrome:
- on Firefox, we have to make sure that, when modifying the selection,
hovering on blank areas will hover on the .endOfContent element
rather than on the .textLayer element. This is done by adjusting the
z-indexes so that .endOfContent is above .textLayer.
- on Chrome, hovering on blank areas needs to trigger hovering on an
element that is either immediately after (or immediately before,
depending on which side of the selection the user is moving) the
currently selected text. This is done by moving the .endOfContent
element around between the correct `<span>`s in the text layer.
The new anti-flickering code is also used when selecting using a mouse:
the improvement in Firefox is only observable on multi-page selection,
while in Chrome it also affects selection within a single page.
After this commit, the `z-index`es inside .textLayer are as follows:
- .endOfContent has `z-index: 0`
- everything else has `z-index: 1`
- except for .markedContent, which have `z-index: 0`
and their contents have `z-index: 1`.
`.textLayer` has an explicit `z-index: 0` to introduce a new stacking context,
so that its contents are not drawn on top of `.annotationLayer`.
2024-04-11 12:50:57 +02:00
|
|
|
z-index: 0;
|
2023-10-27 17:38:01 +02:00
|
|
|
cursor: default;
|
|
|
|
user-select: none;
|
2024-07-22 15:02:52 +02:00
|
|
|
}
|
2021-08-01 19:42:05 +02:00
|
|
|
|
2024-07-22 15:02:52 +02:00
|
|
|
&.selecting .endOfContent {
|
|
|
|
top: 0;
|
2023-10-27 17:38:01 +02:00
|
|
|
}
|
2015-11-03 14:20:34 -06:00
|
|
|
}
|