From 3e59e7535d53e091ae54c541b88df07bb2f5a55b Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Mon, 8 Dec 2025 20:05:43 +0100 Subject: [PATCH] Move the css for tree object in its own file --- web/pdf_viewer.css | 1 + web/tree.css | 125 +++++++++++++++++++++++++++++++++++++++++++++ web/viewer.css | 99 ----------------------------------- 3 files changed, 126 insertions(+), 99 deletions(-) create mode 100644 web/tree.css diff --git a/web/pdf_viewer.css b/web/pdf_viewer.css index 947aa28e1..eba8c7310 100644 --- a/web/pdf_viewer.css +++ b/web/pdf_viewer.css @@ -21,6 +21,7 @@ @import url(annotation_editor_layer_builder.css); @import url(sidebar.css); @import url(menu.css); +@import url(tree.css); /* Ignored in GECKOVIEW: end */ :root { diff --git a/web/tree.css b/web/tree.css new file mode 100644 index 000000000..5c6804326 --- /dev/null +++ b/web/tree.css @@ -0,0 +1,125 @@ +/* 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. + */ + +.treeWithDeepNesting { + --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); + + .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; + + content: ""; + background-color: var(--toolbar-icon-bg-color); + mask-size: cover; + } + + &#layersView .treeItem > a { + * { + cursor: pointer; + } + + > label { + padding-inline-start: 4px; + > input { + float: var(--inline-start); + margin-top: 1px; + } + } + } + + > .treeItem, + .treeItem > .treeItems { + margin-inline-start: 20px; + } + + .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: pointer; + + &: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); + } + } + + .treeItemToggler { + position: relative; + float: var(--inline-start); + height: 0; + width: 0; + color: rgb(255 255 255 / 0.5); + + &::before { + inset-inline-end: 4px; + mask-image: var(--treeitem-expanded-icon); + } + + &.treeItemsHidden { + &::before { + mask-image: var(--treeitem-collapsed-icon); + transform: scaleX(var(--dir-factor)); + } + + ~ .treeItems { + display: none; + } + } + + &:hover:is(+ a, ~ .treeItems) { + background-color: var(--treeitem-bg-color); + background-clip: padding-box; + border-radius: 2px; + color: var(--treeitem-hover-color); + } + } +} diff --git a/web/viewer.css b/web/viewer.css index d2ef9366d..16cd88cf1 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -69,17 +69,6 @@ --field-color: light-dark(rgb(6 6 6), rgb(250 250 250)); --field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68)); --field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115)); - --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) - ); --thumbnail-hover-color: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1)); --thumbnail-selected-color: light-dark( rgb(0 0 0 / 0.2), @@ -97,8 +86,6 @@ ); --loading-icon: url(images/loading.svg); - --treeitem-expanded-icon: url(images/treeitem-expanded.svg); - --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg); --toolbarButton-editorComment-icon: url(images/comment-editButton.svg); --toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg); --toolbarButton-editorHighlight-icon: url(images/toolbarButton-editorHighlight.svg); @@ -503,19 +490,6 @@ body { box-sizing: border-box; } -.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; - - content: ""; - background-color: var(--toolbar-icon-bg-color); - mask-size: cover; -} - #sidebarToggleButton::before { mask-image: var(--toolbarButton-sidebarToggle-icon); transform: scaleX(var(--dir-factor)); @@ -777,79 +751,6 @@ body { } } -.treeWithDeepNesting > .treeItem, -.treeItem > .treeItems { - margin-inline-start: 20px; -} - -.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: pointer; -} - -#layersView .treeItem > a * { - cursor: pointer; -} - -#layersView .treeItem > a > label { - padding-inline-start: 4px; -} - -#layersView .treeItem > a > label > input { - float: var(--inline-start); - margin-top: 1px; -} - -.treeItemToggler { - position: relative; - float: var(--inline-start); - height: 0; - width: 0; - color: rgb(255 255 255 / 0.5); -} - -.treeItemToggler::before { - inset-inline-end: 4px; - mask-image: var(--treeitem-expanded-icon); -} - -.treeItemToggler.treeItemsHidden::before { - mask-image: var(--treeitem-collapsed-icon); - transform: scaleX(var(--dir-factor)); -} - -.treeItemToggler.treeItemsHidden ~ .treeItems { - display: none; -} - -.treeItem.selected > a { - background-color: var(--treeitem-selected-bg-color); - color: var(--treeitem-selected-color); -} - -.treeItemToggler:hover, -.treeItemToggler:hover + a, -.treeItemToggler:hover ~ .treeItems, -.treeItem > a:hover { - background-color: var(--treeitem-bg-color); - background-clip: padding-box; - border-radius: 2px; - color: var(--treeitem-hover-color); -} - #outlineOptionsContainer { display: none;