xref: /webtrees/resources/css/_chart-interactive.css (revision ac71572d8462e396ed5a307f05b29381e49f9e6e)
1/**
2 * webtrees: online genealogy
3 * Copyright (C) 2022 webtrees development team
4 * This program is free software: you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation, either version 3 of the License, or
7 * (at your option) any later version.
8 * This program is distributed in the hope that it will be useful,
9 * but WITHOUT ANY WARRANTY; without even the implied warranty of
10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11 * GNU General Public License for more details.
12 * You should have received a copy of the GNU General Public License
13 * along with this program. If not, see <http://www.gnu.org/licenses/>.
14 */
15
16/*
17 * Interactive tree
18 *
19 * wt-chart, wt-chart-interactive
20 */
21
22.tv_out {
23    position: relative;
24    overflow: hidden;
25    border: thin solid #CCCCCC; /* customizable */
26    /* The chart height can be adjusted to fill the pag */
27    height: 50vh;
28    resize: vertical;
29    min-height: 25vh;
30    max-height: 95vh;
31    background: #E6E6E6; /* customizable */
32    display: -webkit-box;
33    display: -moz-box;
34    display: flex;
35    align-items: center;
36    justify-content: center;
37}
38.tv_out img {
39    border: 0;
40}
41
42.tv_in {
43    clear: both;
44    cursor: move;
45    display: inline-block; /* prevent from blinking on IE */
46}
47
48.tv_in table.tv_tree,
49.tv_in table.tv_tree tbody,
50.tv_in table.tv_tree tr,
51.tv_in table.tv_tree td {
52    border: 0 none;
53    padding: 0;
54    margin: 0;
55    background: none;
56    font-size: 11px;
57}
58.tv_in table.tv_tree {
59    border-collapse: collapse;
60}
61
62#tvbCompact {
63    background-image: url(images/compact.png);
64}
65
66/* Border (also have class table.tv_tree) */
67table#tvTreeBorder td#tv_tree_topleft {
68    background: none;
69}
70table#tvTreeBorder td#tv_tree_top {
71    background: none;
72}
73table#tvTreeBorder td#tv_tree_top div{
74    font-family: Arial,Verdana,sans-serif;
75    font-size: 18px;
76}
77table#tvTreeBorder td#tv_tree_topright {
78    background: none;
79}
80table#tvTreeBorder td#tv_tree_left {
81    background: none;
82}
83table#tvTreeBorder td#tv_tree_right {
84    background: none;
85}
86table#tvTreeBorder td#tv_tree_bottomleft {
87    background: none;
88}
89table#tvTreeBorder td#tv_tree_bottom {
90    background: none;
91}
92table#tvTreeBorder td#tv_tree_bottomright {
93    background: none;
94}
95/* tree */
96table#tvTreeBorder td,
97#tv_tree {
98    background: none;
99}
100
101/* horizontal and vertical lines color */
102#tv_tree div.tv_vline,
103#tv_tree div.tv_hline {
104    background-color: #81A9CB; /* customizable :should be the same color than in background images of td.tv_vline_x */
105}
106
107/* TD container for a vertical line */
108#tv_tree table.tv_tree td.tv_vline {
109    width: 1px;
110    background: repeat-x 50% 50%;
111    height: 100%; /* required */
112}
113#tv_tree table.tv_tree td.tv_vline_h {
114    background-image: url(images/vline.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */
115}
116#tv_tree table.tv_tree td.tv_vline_t {
117    vertical-align: bottom;
118    background-image: url(images/vline_t.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */
119}
120#tv_tree table.tv_tree td.tv_vline_b {
121    vertical-align: top;
122    background-image: url(images/vline_b.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */
123}
124#tv_tree table.tv_tree td.tv_vline_c,
125.tv_in table.tv_tree td.tv_vline_h {
126    vertical-align: middle;
127}
128#tv_tree table.tv_tree td.tv_vline_c {
129    height: 1px;
130}
131/* vertical line drawing */
132#tv_tree table.tv_tree div.tv_vline {
133    width: 1px;
134}
135#tv_tree table.tv_tree div.tv_vline_t,
136#tv_tree table.tv_tree div.tv_vline_b {
137    height: 50%;
138}
139#tv_tree table.tv_tree div.tv_vline_c {
140    height: 1px;
141    overflow: hidden; /* required for IE */
142}
143#tv_tree table.tv_tree div.tv_vline_h {
144    height: 100%;
145}
146
147/* horizontal line drawing */
148#tv_tree td.tv_hline,
149#tv_tree div.tv_hline {
150    overflow: hidden; /* required for IE */
151    width: 8px; /* customizable */
152}
153#tv_tree div.tv_hline {
154    height: 1px;
155}
156
157/* Person or couple(s) box style */
158#tv_tree div.tv_box {
159    border: thin outset #81A9CB; /* customizable */
160    background: #fffdfd; /* customizable */
161    margin-top: 2px;
162    margin-bottom: 2px;
163    padding: 0;
164    width: 180px; /* customizable:initial box width */
165    cursor: help; /* customizable */
166    border-collapse: collapse; /* required */
167    border-radius: 4px; /* customizable */
168    box-shadow: 1px 1px 2px #cfcfdf; /* customizable */
169}
170#tv_tree div.boxExpanded {
171    width: 250px; /* customizable:initial expanded box width */
172}
173#tv_tree div.tv_box div.tvM {
174    background: #f5fdff; /* customizable */
175    color: #220000; /* customizable */
176}
177#tv_tree div.tv_box div.tvF {
178    background: #fff8f5; /* customizable */
179    color: #000022; /* customizable */
180}
181#tv_tree div.tv_box span.tvSexSymbol {
182    font-weight: bold;
183    font-family: x-large, serif; /*Arial Unicode MS, monospace; /* customizable, BUT test required for ALL browsers */
184    vertical-align: top;
185    margin: 1px;
186}
187#tv_tree div.tv_box span.tvM {
188    color: #8f8fdf; /* customizable */
189}
190#tv_tree div.tv_box span.tvF {
191    color: #df8f8f; /* customizable */
192}
193
194#tv_tree div.tv_box div.tvM,
195#tv_tree .tv_box div.tvF {
196    clear: both;
197    border: 0;
198    margin: 0;
199    padding: 1px 4px;
200    border-radius: 4px; /* customizable */
201}
202#tv_tree div.tv_box i.dates {
203    float: right;
204    font-size: 75%;
205    margin-left: 4px;
206}
207#tv_tree div.tv_box img.tv_treelink {
208    height: 15px;
209    width: 15px;
210    float: right;
211}
212#tv_tree div.tv_box img.tv_box_loading {
213    height: 12px;
214    width: 12px;
215    margin: 2px;
216    float: right;
217}
218#tv_tree div.tv_box div.tv_person_expanded {
219    min-height: 55px;
220    padding: 2px;
221}
222#tv_tree div.tv_box img {
223    float: left;
224    margin: 2px;
225    max-height: 50px;
226    max-width: 80px;
227    width: auto;
228}
229#tv_tree div.tv_box .icon-silhouette {
230    float: left;
231}
232#tv_tree div.tv_box div.tv_person_expanded a {
233    font-weight: bold;
234}
235
236/* The toolbox style. Button's images come from the active theme */
237#tv_tools,
238#tvStylesSubmenu {
239    display: inline-block;
240    position: absolute;
241    left: 0;
242    top: 0;
243    padding: 0;
244    margin: 0; /* required */
245    z-index: 90; /* should be < 100 because 100 is the z-index of WT menus */
246    background-color: #efefef; /* customizable */
247    border: 1px outset #dfdfdf; /* customizable */
248    border-radius: 4px; /* customizable */
249    box-shadow: 1px 1px 2px #cfcfdf; /* customizable */
250}
251
252/* styles submenu */
253#tvStylesSubmenu {
254    display: none;
255    left: 0;
256    top: 0;
257    z-index: 91; /* just over tv_tools */
258}
259
260#tv_tools ul {
261    list-style: none;
262    margin: 0;
263    padding: 0; /* required */
264}
265#tv_tools li.tv_button {
266    float: left;
267    position: relative;
268    padding: 0; /* required */
269    margin: 0;
270    width: 24px;
271    height: 24px;
272    text-align: center;
273    vertical-align: middle;
274    border: thin solid #efefef; /* customizable */
275    background-color: #efefef; /* customizable */
276    border-radius: 4px;
277}
278#tvStylesSubmenu li.tv_button {
279    float : none;
280}
281#tv_tools li.tv_button a {
282    margin: 0;
283    display: block;
284}
285#tv_tools li.tv_button:hover {
286    border: thin outset #fdfffd; /* customizable */
287    cursor: pointer;
288}
289#tv_tools li.tvPressed {
290    border: thin inset #ffffff; /* customizable */
291}
292#tv_tools ul li img {
293    border: none;
294    margin: 0;
295    padding: 0;
296    width: 22px;
297    height: 22px;
298    cursor: pointer;
299    text-align: center;
300    vertical-align: middle;
301}
302#tv_tools ul li a.help img.icon {
303    margin: 3px 0 0;
304    padding: 0;
305    width: 15px;
306    height: 15px;
307}
308
309#tvToolsHandler {
310    float: left;
311    cursor: move;
312    height: 22px;
313    width: 2px;
314    border: thin inset #f6f6f6; /* customizable */
315    margin: 2px;
316    overflow: hidden; /* required for IE */
317}
318
319#tvToolsHandler:hover {
320    border: thin outset #f6f6f6; /* customizable */
321}
322
323
324#tv_tree div.tv_box div.tvM,
325#tv_tree div.tv_box div.tvF {
326    background: none;
327    color: #000;
328    border: 0;
329    margin: 0;
330    padding: 0 4px;
331}
332
333.tvM {background-color: #DDF !important;}
334.tvF {background-color: #FDD !important;}
335
336.dashed {border-top: thin dashed #81A9CB !important;}
337