Skip to content

Commit 6e0f7de

Browse files
mlipokmlipok
authored
Add files via upload
1 parent c4db916 commit 6e0f7de

3 files changed

Lines changed: 239 additions & 0 deletions

File tree

‎examples/JS_Lib/jsonTree/icons.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/JS_Lib/jsonTree/jsonTree.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/*
2+
* JSON Tree Viewer
3+
* http://github.com/summerstyle/jsonTreeViewer
4+
*
5+
* Copyright 2017 Vera Lobacheva (http://iamvera.com)
6+
* Released under the MIT license (LICENSE.txt)
7+
*/
8+
9+
/* Background for the tree. May use for <body> element */
10+
.jsontree_bg {
11+
background: #FFF;
12+
}
13+
14+
/* Styles for the container of the tree (e.g. fonts, margins etc.) */
15+
.jsontree_tree {
16+
margin-left: 30px;
17+
font-family: 'PT Mono', monospace;
18+
font-size: 14px;
19+
}
20+
21+
/* Styles for a list of child nodes */
22+
.jsontree_child-nodes {
23+
display: none;
24+
margin-left: 35px;
25+
margin-bottom: 5px;
26+
line-height: 2;
27+
}
28+
.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_child-nodes {
29+
display: block;
30+
}
31+
32+
/* Styles for labels */
33+
.jsontree_label-wrapper {
34+
float: left;
35+
margin-right: 8px;
36+
}
37+
.jsontree_label {
38+
font-weight: normal;
39+
vertical-align: top;
40+
color: #000;
41+
position: relative;
42+
padding: 1px;
43+
border-radius: 4px;
44+
cursor: default;
45+
}
46+
.jsontree_node_marked > .jsontree_label-wrapper > .jsontree_label {
47+
background: #fff2aa;
48+
}
49+
50+
/* Styles for values */
51+
.jsontree_value-wrapper {
52+
display: block;
53+
overflow: hidden;
54+
}
55+
.jsontree_node_complex > .jsontree_value-wrapper {
56+
overflow: inherit;
57+
}
58+
.jsontree_value {
59+
vertical-align: top;
60+
display: inline;
61+
}
62+
.jsontree_value_null {
63+
color: #777;
64+
font-weight: bold;
65+
}
66+
.jsontree_value_string {
67+
color: #025900;
68+
font-weight: bold;
69+
}
70+
.jsontree_value_number {
71+
color: #000E59;
72+
font-weight: bold;
73+
}
74+
.jsontree_value_boolean {
75+
color: #600100;
76+
font-weight: bold;
77+
}
78+
79+
/* Styles for active elements */
80+
.jsontree_expand-button {
81+
position: absolute;
82+
top: 3px;
83+
left: -15px;
84+
display: block;
85+
width: 11px;
86+
height: 11px;
87+
background-image: url('icons.svg');
88+
}
89+
.jsontree_node_expanded > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button {
90+
background-position: 0 -11px;
91+
}
92+
.jsontree_show-more {
93+
cursor: pointer;
94+
}
95+
.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
96+
display: none;
97+
}
98+
.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button,
99+
.jsontree_node_empty > .jsontree_value-wrapper > .jsontree_value > .jsontree_show-more {
100+
display: none !important;
101+
}
102+
.jsontree_node_complex > .jsontree_label-wrapper > .jsontree_label {
103+
cursor: pointer;
104+
}
105+
.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label {
106+
cursor: default !important;
107+
}

‎examples/JS_Lib/jsonTree/jsonTreeDark.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/* * Custom Dark Theme for jsonTreeViewer
2+
* Designed for WebView2AutoIt Framework
3+
*/
4+
5+
/* Background & Main Container */
6+
body {
7+
background-color: #2B2B2B;
8+
color: #D4D4D4;
9+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
10+
margin: 0;
11+
padding: 15px;
12+
}
13+
14+
.jsontree_tree {
15+
margin-left: 10px;
16+
font-size: 14px;
17+
}
18+
19+
/* Vertical Connection Lines */
20+
.jsontree_child-nodes {
21+
display: none;
22+
margin-left: 22px; /* Alignment with the arrow */
23+
border-left: 1px solid #454545; /* The line that was faint - now it's solid */
24+
padding-left: 10px;
25+
margin-bottom: 5px;
26+
line-height: 1.6;
27+
}
28+
29+
.jsontree_node_expanded > .jsontree_value-wrapper > .jsontree_value > .jsontree_child-nodes {
30+
display: block;
31+
}
32+
33+
/* Labels (Keys) */
34+
.jsontree_label-wrapper {
35+
float: left;
36+
margin-right: 8px;
37+
}
38+
39+
.jsontree_label {
40+
font-weight: bold;
41+
color: #9CDCFE;
42+
position: relative;
43+
cursor: pointer;
44+
padding-left: 5px;
45+
border-radius: 3px;
46+
}
47+
48+
/* If you want to COMPLETELY eliminate any trace of icons.svg that might be loading */
49+
.jsontree_expand-button {
50+
background-image: none !important; /* Makes sure there is no icon behind it */
51+
background: transparent !important;
52+
}
53+
54+
.jsontree_label:hover {
55+
background-color: #333333;
56+
}
57+
58+
/* All matching results found */
59+
.jsontree_node_marked {
60+
background-color: #4b4b00 !important; /* Dim gold */
61+
color: #ffffff !important;
62+
border-radius: 2px;
63+
}
64+
65+
/* The current active result (Find Next) */
66+
.jsontree_node_active {
67+
background-color: #ffca28 !important; /* Bright yellow */
68+
color: #000000 !important;
69+
font-weight: bold !important;
70+
box-shadow: 0 0 5px #fff;
71+
display: inline-block;
72+
}
73+
74+
/* Values Styles */
75+
.jsontree_value_null {
76+
color: #569CD6;
77+
font-weight: bold;
78+
}
79+
80+
.jsontree_value_string {
81+
color: #CE9178; /* Orange-brown */
82+
}
83+
84+
.jsontree_value_number {
85+
color: #B5CEA8; /* Light Green */
86+
}
87+
88+
.jsontree_value_boolean {
89+
color: #569CD6; /* Blue */
90+
}
91+
92+
/* Custom Expand/Collapse Icons */
93+
.jsontree_expand-button {
94+
position: absolute;
95+
top: -1px; /* Adjust height to be in the center of the line */
96+
left: -18px; /* We move it a little further to the left because it grew. */
97+
width: 16px;
98+
height: 16px;
99+
background: none !important;
100+
text-align: center;
101+
line-height: 16px;
102+
cursor: pointer;
103+
}
104+
105+
/* The symbol ▶ */
106+
.jsontree_expand-button::before {
107+
content: '▸';
108+
font-size: 26px;
109+
color: #808080;
110+
display: block;
111+
transition: transform 0.2s ease; /* Small motion effect */
112+
}
113+
114+
/* The ▼ symbol when open - ▶ ▼ , ➕➖ , ▸ ▾ */
115+
.jsontree_node_expanded > .jsontree_label-wrapper > .jsontree_label > .jsontree_expand-button::before {
116+
content: '▾';
117+
font-size: 26px; /* Same size here */
118+
color: #D4D4D4;
119+
}
120+
121+
/* Complex nodes (Objects/Arrays) indicators */
122+
.jsontree_show-more {
123+
color: #808080;
124+
font-style: italic;
125+
cursor: pointer;
126+
font-size: 12px;
127+
}
128+
129+
.jsontree_node_empty > .jsontree_label-wrapper > .jsontree_label {
130+
cursor: default;
131+
}

0 commit comments

Comments
 (0)