xref: /webtrees/resources/css/_chart-pedigree.css (revision b0fcccb03b84c12d54b4ae85014c3af52863d08c) 
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 * 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    z-index: -1;
51}
52
53.wt-chart-pedigree-right .wt-generation-rev-2 > .wt-pedigree-lines {
54    top: 12.5%;
55    bottom: 12.5%;
56    height: 75%;
57}
58
59/* Pedigree chart with oldest on the left */
60.wt-chart-pedigree-left .wt-pedigree-lines {
61    left: 0;
62    top: 25%;
63    bottom: 25%;
64    border: var(--chart-line);
65    border-left: none;
66    border-radius: 0 var(--chart-line-radius) var(--chart-line-radius) 0;
67    width: 25%;
68    height: 50%;
69    z-index: -1;
70}
71
72.wt-chart-pedigree-left .wt-generation-rev-2 > .wt-pedigree-lines {
73    top: 12.5%;
74    bottom: 12.5%;
75    height: 75%;
76}
77
78/* Pedigree chart with oldest at the bottom */
79.wt-chart-pedigree-down {
80    width: max-content;
81}
82
83.wt-chart-pedigree-down .wt-pedigree-lines {
84    bottom: 0;
85    left: 25%;
86    right: 25%;
87    border: var(--chart-line);
88    border-bottom: none;
89    border-radius: var(--chart-line-radius) var(--chart-line-radius) 0 0;
90    width: 50%;
91    height: 25%;
92    z-index: -1;
93}
94
95.wt-chart-pedigree-down .wt-generation-rev-2 > .wt-pedigree-lines {
96    left: 12.5%;
97    right: 12.5%;
98    width: 75%;
99}
100
101/* Pedigree chart with oldest at the top */
102.wt-chart-pedigree-up {
103    width: max-content;
104}
105
106.wt-chart-pedigree-up .wt-pedigree-lines {
107    top: 0;
108    left: 25%;
109    right: 25%;
110    border: var(--chart-line);
111    border-top: none;
112    border-radius: 0 0 var(--chart-line-radius) var(--chart-line-radius);
113    width: 50%;
114    height: 25%;
115    z-index: -1;
116}
117
118.wt-chart-pedigree-up .wt-generation-rev-2 > .wt-pedigree-lines {
119    left: 12.5%;
120    right: 12.5%;
121    width: 75%;
122}
123
124
125