fork from https://github.com/mozilla/pdf.js.git

2026-06-08 13:26:57 +02:00
parent be60be5b03
commit 141762041b
2444 changed files with 1179392 additions and 15 deletions
--- a/web/tree.css
+++ b/web/tree.css
@@ -0,0 +1,126 @@
+/* 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);
+    }
+  }
+}