mirror of
https://github.com/mozilla/pdf.js.git
synced 2026-04-09 23:04:02 +02:00
385c936318
This patch updates the minimum supported browsers as follows: - Google Chrome 118, which was released on 2023-10-10; see https://chromereleases.googleblog.com/2023/10/stable-channel-update-for-desktop_10.html We haven't made any changes to the supported Google Chrome version for a year, and this change allows us to remove "hacks" needed to support `float: inline-start/inline-end` in old browsers; see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/float#browser_compatibility. Note that nowadays we usually try, where feasible and possible, to support browsers that are about two years old. By limiting support to only "recent" browsers we reduce the risk of holding back improvements of the *built-in* Firefox PDF Viewer, and also (significantly) reduce the maintenance/support burden for the PDF.js contributors. *Please note:* As always, the minimum supported browser version assumes that a `legacy`-build of the PDF.js library is being used; see https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support
127 lines
3.3 KiB
CSS
127 lines
3.3 KiB
CSS
/* Copyright 2025 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.
|
|
*/
|
|
|
|
.treeView {
|
|
--treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8));
|
|
--treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));
|
|
--treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9));
|
|
--treeitem-selected-color: light-dark(
|
|
rgb(0 0 0 / 0.9),
|
|
rgb(255 255 255 / 0.9)
|
|
);
|
|
--treeitem-selected-bg-color: light-dark(
|
|
rgb(0 0 0 / 0.25),
|
|
rgb(255 255 255 / 0.25)
|
|
);
|
|
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
|
|
--treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
|
|
|
|
&.withNesting {
|
|
.treeItemToggler {
|
|
&::before {
|
|
/* All matching images have a size of 16x16
|
|
* All relevant containers have a size of 28x28 */
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
inset-inline-end: 4px;
|
|
|
|
content: "";
|
|
background-color: var(--toolbar-icon-bg-color);
|
|
mask-image: var(--treeitem-expanded-icon);
|
|
mask-size: cover;
|
|
}
|
|
|
|
position: relative;
|
|
float: inline-start;
|
|
height: 0;
|
|
width: 0;
|
|
color: rgb(255 255 255 / 0.5);
|
|
|
|
&.treeItemsHidden {
|
|
&::before {
|
|
mask-image: var(--treeitem-collapsed-icon);
|
|
transform: scaleX(var(--dir-factor));
|
|
}
|
|
|
|
~ .treeItems {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover + a,
|
|
&:hover ~ .treeItems {
|
|
background-color: var(--treeitem-bg-color);
|
|
background-clip: padding-box;
|
|
border-radius: 2px;
|
|
color: var(--treeitem-hover-color);
|
|
}
|
|
}
|
|
|
|
> .treeItem,
|
|
.treeItem > .treeItems {
|
|
margin-inline-start: 20px;
|
|
}
|
|
}
|
|
|
|
&#layersView .treeItem > a {
|
|
* {
|
|
cursor: pointer;
|
|
}
|
|
|
|
> label {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-inline-start: 4px;
|
|
> input {
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.treeItem {
|
|
> a {
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
/* Subtract the right padding (left, in RTL mode) of the container: */
|
|
min-width: calc(100% - 4px);
|
|
height: auto;
|
|
margin-bottom: 1px;
|
|
padding: 2px 0 5px;
|
|
padding-inline-start: 4px;
|
|
border-radius: 2px;
|
|
color: var(--treeitem-color);
|
|
font-size: 13px;
|
|
line-height: 15px;
|
|
user-select: none;
|
|
white-space: normal;
|
|
cursor: default;
|
|
|
|
&:hover {
|
|
background-color: var(--treeitem-bg-color);
|
|
background-clip: padding-box;
|
|
border-radius: 2px;
|
|
color: var(--treeitem-hover-color);
|
|
}
|
|
}
|
|
|
|
&.selected > a {
|
|
background-color: var(--treeitem-selected-bg-color);
|
|
color: var(--treeitem-selected-color);
|
|
}
|
|
}
|
|
}
|