xref: /webtrees/resources/css/_chart-interactive.css (revision 5d4b7ec24d2b390be41475c9b93e00d957e93fef)
1/**
2 * webtrees: online genealogy
3 * Copyright (C) 2019 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[dir=rtl] #tv_tree div.tv_box img {
230    float: right;
231}
232#tv_tree div.tv_box .icon-silhouette-M,
233#tv_tree div.tv_box .icon-silhouette-F,
234#tv_tree div.tv_box .icon-silhouette-U {
235    float: left;
236}
237[dir=rtl] #tv_tree div.tv_box .icon-silhouette-M,
238[dir=rtl] #tv_tree div.tv_box .icon-silhouette-F,
239[dir=rtl] #tv_tree div.tv_box .icon-silhouette-U {
240    float: right;
241}
242
243#tv_tree div.tv_box div.tv_person_expanded a {
244    font-weight: bold;
245}
246
247/* The toolbox style. Button's images come from the active theme */
248#tv_tools,
249#tvStylesSubmenu {
250    display: inline-block;
251    position: absolute;
252    left: 0;
253    top: 0;
254    padding: 0;
255    margin: 0; /* required */
256    z-index: 90; /* should be < 100 because 100 is the z-index of WT menus */
257    background-color: #efefef; /* customizable */
258    border: 1px outset #dfdfdf; /* customizable */
259    border-radius: 4px; /* customizable */
260    box-shadow: 1px 1px 2px #cfcfdf; /* customizable */
261}
262
263/* styles submenu */
264#tvStylesSubmenu {
265    display: none;
266    left: 0;
267    top: 0;
268    z-index: 91; /* just over tv_tools */
269}
270
271#tv_tools ul {
272    list-style: none;
273    margin: 0;
274    padding: 0; /* required */
275}
276#tv_tools li.tv_button {
277    float: left;
278    position: relative;
279    padding: 0; /* required */
280    margin: 0;
281    width: 24px;
282    height: 24px;
283    text-align: center;
284    vertical-align: middle;
285    border: thin solid #efefef; /* customizable */
286    background-color: #efefef; /* customizable */
287    border-radius: 4px;
288}
289#tvStylesSubmenu li.tv_button {
290    float : none;
291}
292#tv_tools li.tv_button a {
293    margin: 0;
294    display: block;
295}
296#tv_tools li.tv_button:hover {
297    border: thin outset #fdfffd; /* customizable */
298    cursor: pointer;
299}
300#tv_tools li.tvPressed {
301    border: thin inset #ffffff; /* customizable */
302}
303#tv_tools ul li img {
304    border: none;
305    margin: 0;
306    padding: 0;
307    width: 22px;
308    height: 22px;
309    cursor: pointer;
310    text-align: center;
311    vertical-align: middle;
312}
313#tv_tools ul li a.help img.icon {
314    margin: 3px 0 0;
315    padding: 0;
316    width: 15px;
317    height: 15px;
318}
319
320#tvToolsHandler {
321    float: left;
322    cursor: move;
323    height: 22px;
324    width: 2px;
325    border: thin inset #f6f6f6; /* customizable */
326    margin: 2px;
327    overflow: hidden; /* required for IE */
328}
329
330#tvToolsHandler:hover {
331    border: thin outset #f6f6f6; /* customizable */
332}
333
334
335#tv_tree div.tv_box div.tvM,
336#tv_tree div.tv_box div.tvF {
337    background: none;
338    color: #000;
339    border: 0;
340    margin: 0;
341    padding: 0 4px;
342}
343
344.tvM {background-color: #DDF !important;}
345.tvF {background-color: #FDD !important;}
346
347.dashed {border-top: thin dashed #81A9CB !important;}
348