xref: /webtrees/resources/css/_chart-pedigree.css (revision e16a1bfdc151cca06b727ccf08cd4f43ed7d6e55)
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