Skip to content

Commit 171fede

Browse files
timvandermeijtimvandermeij
authored
Merge pull request #20493 from calixteman/mv_tree
Move the css for tree object in its own file
2 parents f75812b + 3e59e75 commit 171fede

File tree

3 files changed

+126
-99
lines changed

3 files changed

+126
-99
lines changed

‎web/pdf_viewer.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
@import url(annotation_editor_layer_builder.css);
2222
@import url(sidebar.css);
2323
@import url(menu.css);
24+
@import url(tree.css);
2425
/* Ignored in GECKOVIEW: end */
2526

2627
:root {

‎web/tree.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* Copyright 2025 Mozilla Foundation
2+
*
3+
* Licensed under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License.
5+
* You may obtain a copy of the License at
6+
*
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* Unless required by applicable law or agreed to in writing, software
10+
* distributed under the License is distributed on an "AS IS" BASIS,
11+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
* See the License for the specific language governing permissions and
13+
* limitations under the License.
14+
*/
15+
16+
.treeWithDeepNesting {
17+
--treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8));
18+
--treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));
19+
--treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9));
20+
--treeitem-selected-color: light-dark(
21+
rgb(0 0 0 / 0.9),
22+
rgb(255 255 255 / 0.9)
23+
);
24+
--treeitem-selected-bg-color: light-dark(
25+
rgb(0 0 0 / 0.25),
26+
rgb(255 255 255 / 0.25)
27+
);
28+
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
29+
--treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
30+
31+
.treeItemToggler::before {
32+
/* All matching images have a size of 16x16
33+
* All relevant containers have a size of 28x28 */
34+
position: absolute;
35+
display: inline-block;
36+
width: 16px;
37+
height: 16px;
38+
39+
content: "";
40+
background-color: var(--toolbar-icon-bg-color);
41+
mask-size: cover;
42+
}
43+
44+
&#layersView .treeItem > a {
45+
* {
46+
cursor: pointer;
47+
}
48+
49+
> label {
50+
padding-inline-start: 4px;
51+
> input {
52+
float: var(--inline-start);
53+
margin-top: 1px;
54+
}
55+
}
56+
}
57+
58+
> .treeItem,
59+
.treeItem > .treeItems {
60+
margin-inline-start: 20px;
61+
}
62+
63+
.treeItem {
64+
> a {
65+
text-decoration: none;
66+
display: inline-block;
67+
/* Subtract the right padding (left, in RTL mode) of the container: */
68+
min-width: calc(100% - 4px);
69+
height: auto;
70+
margin-bottom: 1px;
71+
padding: 2px 0 5px;
72+
padding-inline-start: 4px;
73+
border-radius: 2px;
74+
color: var(--treeitem-color);
75+
font-size: 13px;
76+
line-height: 15px;
77+
user-select: none;
78+
white-space: normal;
79+
cursor: pointer;
80+
81+
&:hover {
82+
background-color: var(--treeitem-bg-color);
83+
background-clip: padding-box;
84+
border-radius: 2px;
85+
color: var(--treeitem-hover-color);
86+
}
87+
}
88+
89+
&.selected > a {
90+
background-color: var(--treeitem-selected-bg-color);
91+
color: var(--treeitem-selected-color);
92+
}
93+
}
94+
95+
.treeItemToggler {
96+
position: relative;
97+
float: var(--inline-start);
98+
height: 0;
99+
width: 0;
100+
color: rgb(255 255 255 / 0.5);
101+
102+
&::before {
103+
inset-inline-end: 4px;
104+
mask-image: var(--treeitem-expanded-icon);
105+
}
106+
107+
&.treeItemsHidden {
108+
&::before {
109+
mask-image: var(--treeitem-collapsed-icon);
110+
transform: scaleX(var(--dir-factor));
111+
}
112+
113+
~ .treeItems {
114+
display: none;
115+
}
116+
}
117+
118+
&:hover:is(+ a, ~ .treeItems) {
119+
background-color: var(--treeitem-bg-color);
120+
background-clip: padding-box;
121+
border-radius: 2px;
122+
color: var(--treeitem-hover-color);
123+
}
124+
}
125+
}

‎web/viewer.css‎

Lines changed: 0 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,6 @@
6969
--field-color: light-dark(rgb(6 6 6), rgb(250 250 250));
7070
--field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68));
7171
--field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115));
72-
--treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8));
73-
--treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15));
74-
--treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9));
75-
--treeitem-selected-color: light-dark(
76-
rgb(0 0 0 / 0.9),
77-
rgb(255 255 255 / 0.9)
78-
);
79-
--treeitem-selected-bg-color: light-dark(
80-
rgb(0 0 0 / 0.25),
81-
rgb(255 255 255 / 0.25)
82-
);
8372
--thumbnail-hover-color: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
8473
--thumbnail-selected-color: light-dark(
8574
rgb(0 0 0 / 0.2),
@@ -97,8 +86,6 @@
9786
);
9887

9988
--loading-icon: url(images/loading.svg);
100-
--treeitem-expanded-icon: url(images/treeitem-expanded.svg);
101-
--treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
10289
--toolbarButton-editorComment-icon: url(images/comment-editButton.svg);
10390
--toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg);
10491
--toolbarButton-editorHighlight-icon: url(images/toolbarButton-editorHighlight.svg);
@@ -503,19 +490,6 @@ body {
503490
box-sizing: border-box;
504491
}
505492

506-
.treeItemToggler::before {
507-
/* All matching images have a size of 16x16
508-
* All relevant containers have a size of 28x28 */
509-
position: absolute;
510-
display: inline-block;
511-
width: 16px;
512-
height: 16px;
513-
514-
content: "";
515-
background-color: var(--toolbar-icon-bg-color);
516-
mask-size: cover;
517-
}
518-
519493
#sidebarToggleButton::before {
520494
mask-image: var(--toolbarButton-sidebarToggle-icon);
521495
transform: scaleX(var(--dir-factor));
@@ -777,79 +751,6 @@ body {
777751
}
778752
}
779753

780-
.treeWithDeepNesting > .treeItem,
781-
.treeItem > .treeItems {
782-
margin-inline-start: 20px;
783-
}
784-
785-
.treeItem > a {
786-
text-decoration: none;
787-
display: inline-block;
788-
/* Subtract the right padding (left, in RTL mode) of the container: */
789-
min-width: calc(100% - 4px);
790-
height: auto;
791-
margin-bottom: 1px;
792-
padding: 2px 0 5px;
793-
padding-inline-start: 4px;
794-
border-radius: 2px;
795-
color: var(--treeitem-color);
796-
font-size: 13px;
797-
line-height: 15px;
798-
user-select: none;
799-
white-space: normal;
800-
cursor: pointer;
801-
}
802-
803-
#layersView .treeItem > a * {
804-
cursor: pointer;
805-
}
806-
807-
#layersView .treeItem > a > label {
808-
padding-inline-start: 4px;
809-
}
810-
811-
#layersView .treeItem > a > label > input {
812-
float: var(--inline-start);
813-
margin-top: 1px;
814-
}
815-
816-
.treeItemToggler {
817-
position: relative;
818-
float: var(--inline-start);
819-
height: 0;
820-
width: 0;
821-
color: rgb(255 255 255 / 0.5);
822-
}
823-
824-
.treeItemToggler::before {
825-
inset-inline-end: 4px;
826-
mask-image: var(--treeitem-expanded-icon);
827-
}
828-
829-
.treeItemToggler.treeItemsHidden::before {
830-
mask-image: var(--treeitem-collapsed-icon);
831-
transform: scaleX(var(--dir-factor));
832-
}
833-
834-
.treeItemToggler.treeItemsHidden ~ .treeItems {
835-
display: none;
836-
}
837-
838-
.treeItem.selected > a {
839-
background-color: var(--treeitem-selected-bg-color);
840-
color: var(--treeitem-selected-color);
841-
}
842-
843-
.treeItemToggler:hover,
844-
.treeItemToggler:hover + a,
845-
.treeItemToggler:hover ~ .treeItems,
846-
.treeItem > a:hover {
847-
background-color: var(--treeitem-bg-color);
848-
background-clip: padding-box;
849-
border-radius: 2px;
850-
color: var(--treeitem-hover-color);
851-
}
852-
853754
#outlineOptionsContainer {
854755
display: none;
855756

0 commit comments

Comments
 (0)