xref: /webtrees/resources/css/_chart-pedigree.css (revision b55cbc6b43247e8b2ad14af6f6d24dc6747195ff) 
1/**
2 * webtrees: online genealogy
3 * Copyright (C) 2021 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 * Pedigree chart
18 *
19 * wt-chart, wt-chart-pedigree
20 */
21.wt-chart-pedigree {
22    overflow-y: auto;
23}
24
25.wt-chart-pedigree-left .wt-chart-box,
26.wt-chart-pedigree-right .wt-chart-box {
27    width: 15rem;
28}
29
30.wt-chart-pedigree-up .wt-chart-box,
31.wt-chart-pedigree-down .wt-chart-box {
32    width: 10rem;
33    height: 8rem;
34}
35
36.wt-chart-pedigree .wt-chart-box-lifespan {
37    display: none;
38}
39
40/* Pedigree chart with oldest on the right */
41.wt-chart-pedigree-right .wt-pedigree-lines {
42    right: 0;
43    top: 25%;
44    bottom: 25%;
45    border: var(--chart-line);
46    border-right: none;
47    border-radius: var(--chart-line-radius) 0 0 var(--chart-line-radius);
48    width: 25%;
49    height: 50%;
50}
51
52.wt-chart-pedigree-right .wt-generation-rev-2 > .wt-pedigree-lines {
53    top: 12.5%;
54    bottom: 12.5%;
55    height: 75%;
56}
57
58/* Pedigree chart with oldest on the left */
59.wt-chart-pedigree-left .wt-pedigree-lines {
60    left: 0;
61    top: 25%;
62    bottom: 25%;
63    border: var(--chart-line);
64    border-left: none;
65    border-radius: 0 var(--chart-line-radius) var(--chart-line-radius) 0;
66    width: 25%;
67    height: 50%;
68}
69
70.wt-chart-pedigree-left .wt-generation-rev-2 > .wt-pedigree-lines {
71    top: 12.5%;
72    bottom: 12.5%;
73    height: 75%;
74}
75
76/* Pedigree chart with oldest at the bottom */
77.wt-chart-pedigree-down {
78    width: max-content;
79}
80
81.wt-chart-pedigree-down .wt-pedigree-lines {
82    bottom: 0;
83    left: 25%;
84    right: 25%;
85    border: var(--chart-line);
86    border-bottom: none;
87    border-radius: var(--chart-line-radius) var(--chart-line-radius) 0 0;
88    width: 50%;
89    height: 25%;
90}
91
92.wt-chart-pedigree-down .wt-generation-rev-2 > .wt-pedigree-lines {
93    left: 12.5%;
94    right: 12.5%;
95    width: 75%;
96}
97
98/* Pedigree chart with oldest at the top */
99.wt-chart-pedigree-up {
100    width: max-content;
101}
102
103.wt-chart-pedigree-up .wt-pedigree-lines {
104    top: 0;
105    left: 25%;
106    right: 25%;
107    border: var(--chart-line);
108    border-top: none;
109    border-radius: 0 0 var(--chart-line-radius) var(--chart-line-radius);
110    width: 50%;
111    height: 25%;
112}
113
114.wt-chart-pedigree-up .wt-generation-rev-2 > .wt-pedigree-lines {
115    left: 12.5%;
116    right: 12.5%;
117    width: 75%;
118}
119
120
121