1242a7862SGreg Roach/** 2242a7862SGreg Roach * webtrees: online genealogy 3cd1ec0d0SGreg Roach * Copyright (C) 2021 webtrees development team 4242a7862SGreg Roach * This program is free software: you can redistribute it and/or modify 5242a7862SGreg Roach * it under the terms of the GNU General Public License as published by 6242a7862SGreg Roach * the Free Software Foundation, either version 3 of the License, or 7242a7862SGreg Roach * (at your option) any later version. 8242a7862SGreg Roach * This program is distributed in the hope that it will be useful, 9242a7862SGreg Roach * but WITHOUT ANY WARRANTY; without even the implied warranty of 10242a7862SGreg Roach * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11242a7862SGreg Roach * GNU General Public License for more details. 12242a7862SGreg Roach * You should have received a copy of the GNU General Public License 13242a7862SGreg Roach * along with this program. If not, see <http://www.gnu.org/licenses/>. 14242a7862SGreg Roach */ 15242a7862SGreg Roach 16242a7862SGreg Roach/* 17242a7862SGreg Roach * Interactive tree 18242a7862SGreg Roach * 19242a7862SGreg Roach * wt-chart, wt-chart-interactive 20242a7862SGreg Roach */ 212ebb07b4SGreg Roach 222ebb07b4SGreg Roach.tv_out { 232ebb07b4SGreg Roach position: relative; 242ebb07b4SGreg Roach overflow: hidden; 252ebb07b4SGreg Roach border: thin solid #CCCCCC; /* customizable */ 2617e26b03SGreg Roach /* The chart height can be adjusted to fill the pag */ 2717e26b03SGreg Roach height: 50vh; 2817e26b03SGreg Roach resize: vertical; 2917e26b03SGreg Roach min-height: 25vh; 3017e26b03SGreg Roach max-height: 95vh; 312ebb07b4SGreg Roach background: #E6E6E6; /* customizable */ 322ebb07b4SGreg Roach display: -webkit-box; 332ebb07b4SGreg Roach display: -moz-box; 342ebb07b4SGreg Roach display: flex; 352ebb07b4SGreg Roach align-items: center; 362ebb07b4SGreg Roach justify-content: center; 372ebb07b4SGreg Roach} 382ebb07b4SGreg Roach.tv_out img { 392ebb07b4SGreg Roach border: 0; 402ebb07b4SGreg Roach} 412ebb07b4SGreg Roach 422ebb07b4SGreg Roach.tv_in { 432ebb07b4SGreg Roach clear: both; 442ebb07b4SGreg Roach cursor: move; 452ebb07b4SGreg Roach display: inline-block; /* prevent from blinking on IE */ 462ebb07b4SGreg Roach} 472ebb07b4SGreg Roach 482ebb07b4SGreg Roach.tv_in table.tv_tree, 492ebb07b4SGreg Roach.tv_in table.tv_tree tbody, 502ebb07b4SGreg Roach.tv_in table.tv_tree tr, 512ebb07b4SGreg Roach.tv_in table.tv_tree td { 522ebb07b4SGreg Roach border: 0 none; 532ebb07b4SGreg Roach padding: 0; 542ebb07b4SGreg Roach margin: 0; 552ebb07b4SGreg Roach background: none; 562ebb07b4SGreg Roach font-size: 11px; 572ebb07b4SGreg Roach} 582ebb07b4SGreg Roach.tv_in table.tv_tree { 592ebb07b4SGreg Roach border-collapse: collapse; 602ebb07b4SGreg Roach} 612ebb07b4SGreg Roach 622ebb07b4SGreg Roach#tvbCompact { 632ebb07b4SGreg Roach background-image: url(images/compact.png); 642ebb07b4SGreg Roach} 652ebb07b4SGreg Roach 662ebb07b4SGreg Roach/* Border (also have class table.tv_tree) */ 672ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_topleft { 682ebb07b4SGreg Roach background: none; 692ebb07b4SGreg Roach} 702ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_top { 712ebb07b4SGreg Roach background: none; 722ebb07b4SGreg Roach} 732ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_top div{ 742ebb07b4SGreg Roach font-family: Arial,Verdana,sans-serif; 752ebb07b4SGreg Roach font-size: 18px; 762ebb07b4SGreg Roach} 772ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_topright { 782ebb07b4SGreg Roach background: none; 792ebb07b4SGreg Roach} 802ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_left { 812ebb07b4SGreg Roach background: none; 822ebb07b4SGreg Roach} 832ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_right { 842ebb07b4SGreg Roach background: none; 852ebb07b4SGreg Roach} 862ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_bottomleft { 872ebb07b4SGreg Roach background: none; 882ebb07b4SGreg Roach} 892ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_bottom { 902ebb07b4SGreg Roach background: none; 912ebb07b4SGreg Roach} 922ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_bottomright { 932ebb07b4SGreg Roach background: none; 942ebb07b4SGreg Roach} 952ebb07b4SGreg Roach/* tree */ 962ebb07b4SGreg Roachtable#tvTreeBorder td, 972ebb07b4SGreg Roach#tv_tree { 982ebb07b4SGreg Roach background: none; 992ebb07b4SGreg Roach} 1002ebb07b4SGreg Roach 1012ebb07b4SGreg Roach/* horizontal and vertical lines color */ 1022ebb07b4SGreg Roach#tv_tree div.tv_vline, 1032ebb07b4SGreg Roach#tv_tree div.tv_hline { 1042ebb07b4SGreg Roach background-color: #81A9CB; /* customizable :should be the same color than in background images of td.tv_vline_x */ 1052ebb07b4SGreg Roach} 1062ebb07b4SGreg Roach 1072ebb07b4SGreg Roach/* TD container for a vertical line */ 1082ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline { 1092ebb07b4SGreg Roach width: 1px; 1102ebb07b4SGreg Roach background: repeat-x 50% 50%; 1112ebb07b4SGreg Roach height: 100%; /* required */ 1122ebb07b4SGreg Roach} 1132ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_h { 1142ebb07b4SGreg Roach background-image: url(images/vline.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */ 1152ebb07b4SGreg Roach} 1162ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_t { 1172ebb07b4SGreg Roach vertical-align: bottom; 1182ebb07b4SGreg Roach background-image: url(images/vline_t.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */ 1192ebb07b4SGreg Roach} 1202ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_b { 1212ebb07b4SGreg Roach vertical-align: top; 1222ebb07b4SGreg Roach background-image: url(images/vline_b.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */ 1232ebb07b4SGreg Roach} 1242ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_c, 1252ebb07b4SGreg Roach.tv_in table.tv_tree td.tv_vline_h { 1262ebb07b4SGreg Roach vertical-align: middle; 1272ebb07b4SGreg Roach} 1282ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_c { 1292ebb07b4SGreg Roach height: 1px; 1302ebb07b4SGreg Roach} 1312ebb07b4SGreg Roach/* vertical line drawing */ 1322ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline { 1332ebb07b4SGreg Roach width: 1px; 1342ebb07b4SGreg Roach} 1352ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_t, 1362ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_b { 1372ebb07b4SGreg Roach height: 50%; 1382ebb07b4SGreg Roach} 1392ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_c { 1402ebb07b4SGreg Roach height: 1px; 1412ebb07b4SGreg Roach overflow: hidden; /* required for IE */ 1422ebb07b4SGreg Roach} 1432ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_h { 1442ebb07b4SGreg Roach height: 100%; 1452ebb07b4SGreg Roach} 1462ebb07b4SGreg Roach 1472ebb07b4SGreg Roach/* horizontal line drawing */ 1482ebb07b4SGreg Roach#tv_tree td.tv_hline, 1492ebb07b4SGreg Roach#tv_tree div.tv_hline { 1502ebb07b4SGreg Roach overflow: hidden; /* required for IE */ 1512ebb07b4SGreg Roach width: 8px; /* customizable */ 1522ebb07b4SGreg Roach} 1532ebb07b4SGreg Roach#tv_tree div.tv_hline { 1542ebb07b4SGreg Roach height: 1px; 1552ebb07b4SGreg Roach} 1562ebb07b4SGreg Roach 1572ebb07b4SGreg Roach/* Person or couple(s) box style */ 1582ebb07b4SGreg Roach#tv_tree div.tv_box { 1592ebb07b4SGreg Roach border: thin outset #81A9CB; /* customizable */ 1602ebb07b4SGreg Roach background: #fffdfd; /* customizable */ 1612ebb07b4SGreg Roach margin-top: 2px; 1622ebb07b4SGreg Roach margin-bottom: 2px; 1632ebb07b4SGreg Roach padding: 0; 1642ebb07b4SGreg Roach width: 180px; /* customizable:initial box width */ 1652ebb07b4SGreg Roach cursor: help; /* customizable */ 1662ebb07b4SGreg Roach border-collapse: collapse; /* required */ 1672ebb07b4SGreg Roach border-radius: 4px; /* customizable */ 1682ebb07b4SGreg Roach box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ 1692ebb07b4SGreg Roach} 1702ebb07b4SGreg Roach#tv_tree div.boxExpanded { 1712ebb07b4SGreg Roach width: 250px; /* customizable:initial expanded box width */ 1722ebb07b4SGreg Roach} 1732ebb07b4SGreg Roach#tv_tree div.tv_box div.tvM { 1742ebb07b4SGreg Roach background: #f5fdff; /* customizable */ 1752ebb07b4SGreg Roach color: #220000; /* customizable */ 1762ebb07b4SGreg Roach} 1772ebb07b4SGreg Roach#tv_tree div.tv_box div.tvF { 1782ebb07b4SGreg Roach background: #fff8f5; /* customizable */ 1792ebb07b4SGreg Roach color: #000022; /* customizable */ 1802ebb07b4SGreg Roach} 1812ebb07b4SGreg Roach#tv_tree div.tv_box span.tvSexSymbol { 1822ebb07b4SGreg Roach font-weight: bold; 1832ebb07b4SGreg Roach font-family: x-large, serif; /*Arial Unicode MS, monospace; /* customizable, BUT test required for ALL browsers */ 1842ebb07b4SGreg Roach vertical-align: top; 1852ebb07b4SGreg Roach margin: 1px; 1862ebb07b4SGreg Roach} 1872ebb07b4SGreg Roach#tv_tree div.tv_box span.tvM { 1882ebb07b4SGreg Roach color: #8f8fdf; /* customizable */ 1892ebb07b4SGreg Roach} 1902ebb07b4SGreg Roach#tv_tree div.tv_box span.tvF { 1912ebb07b4SGreg Roach color: #df8f8f; /* customizable */ 1922ebb07b4SGreg Roach} 1932ebb07b4SGreg Roach 1942ebb07b4SGreg Roach#tv_tree div.tv_box div.tvM, 1952ebb07b4SGreg Roach#tv_tree .tv_box div.tvF { 1962ebb07b4SGreg Roach clear: both; 1972ebb07b4SGreg Roach border: 0; 1982ebb07b4SGreg Roach margin: 0; 1992ebb07b4SGreg Roach padding: 1px 4px; 2002ebb07b4SGreg Roach border-radius: 4px; /* customizable */ 2012ebb07b4SGreg Roach} 2022ebb07b4SGreg Roach#tv_tree div.tv_box i.dates { 2032ebb07b4SGreg Roach float: right; 2042ebb07b4SGreg Roach font-size: 75%; 2052ebb07b4SGreg Roach margin-left: 4px; 2062ebb07b4SGreg Roach} 2072ebb07b4SGreg Roach#tv_tree div.tv_box img.tv_treelink { 2082ebb07b4SGreg Roach height: 15px; 2092ebb07b4SGreg Roach width: 15px; 2102ebb07b4SGreg Roach float: right; 2112ebb07b4SGreg Roach} 2122ebb07b4SGreg Roach#tv_tree div.tv_box img.tv_box_loading { 2132ebb07b4SGreg Roach height: 12px; 2142ebb07b4SGreg Roach width: 12px; 2152ebb07b4SGreg Roach margin: 2px; 2162ebb07b4SGreg Roach float: right; 2172ebb07b4SGreg Roach} 2182ebb07b4SGreg Roach#tv_tree div.tv_box div.tv_person_expanded { 2192ebb07b4SGreg Roach min-height: 55px; 2202ebb07b4SGreg Roach padding: 2px; 2212ebb07b4SGreg Roach} 2222ebb07b4SGreg Roach#tv_tree div.tv_box img { 2232ebb07b4SGreg Roach float: left; 2242ebb07b4SGreg Roach margin: 2px; 2252ebb07b4SGreg Roach max-height: 50px; 2262ebb07b4SGreg Roach max-width: 80px; 2272ebb07b4SGreg Roach width: auto; 2282ebb07b4SGreg Roach} 2292ebb07b4SGreg Roach[dir=rtl] #tv_tree div.tv_box img { 2302ebb07b4SGreg Roach float: right; 2312ebb07b4SGreg Roach} 232*1baf69deSGreg Roach#tv_tree div.tv_box .icon-silhouette { 2332ebb07b4SGreg Roach float: left; 2342ebb07b4SGreg Roach} 235*1baf69deSGreg Roach[dir=rtl] #tv_tree div.tv_box .icon-silhouette { 2362ebb07b4SGreg Roach float: right; 2372ebb07b4SGreg Roach} 2382ebb07b4SGreg Roach 2392ebb07b4SGreg Roach#tv_tree div.tv_box div.tv_person_expanded a { 2402ebb07b4SGreg Roach font-weight: bold; 2412ebb07b4SGreg Roach} 2422ebb07b4SGreg Roach 2432ebb07b4SGreg Roach/* The toolbox style. Button's images come from the active theme */ 2442ebb07b4SGreg Roach#tv_tools, 2452ebb07b4SGreg Roach#tvStylesSubmenu { 2462ebb07b4SGreg Roach display: inline-block; 2472ebb07b4SGreg Roach position: absolute; 2482ebb07b4SGreg Roach left: 0; 2492ebb07b4SGreg Roach top: 0; 2502ebb07b4SGreg Roach padding: 0; 2512ebb07b4SGreg Roach margin: 0; /* required */ 2522ebb07b4SGreg Roach z-index: 90; /* should be < 100 because 100 is the z-index of WT menus */ 2532ebb07b4SGreg Roach background-color: #efefef; /* customizable */ 2542ebb07b4SGreg Roach border: 1px outset #dfdfdf; /* customizable */ 2552ebb07b4SGreg Roach border-radius: 4px; /* customizable */ 2562ebb07b4SGreg Roach box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ 2572ebb07b4SGreg Roach} 2582ebb07b4SGreg Roach 2592ebb07b4SGreg Roach/* styles submenu */ 2602ebb07b4SGreg Roach#tvStylesSubmenu { 2612ebb07b4SGreg Roach display: none; 2622ebb07b4SGreg Roach left: 0; 2632ebb07b4SGreg Roach top: 0; 2642ebb07b4SGreg Roach z-index: 91; /* just over tv_tools */ 2652ebb07b4SGreg Roach} 2662ebb07b4SGreg Roach 2672ebb07b4SGreg Roach#tv_tools ul { 2682ebb07b4SGreg Roach list-style: none; 2692ebb07b4SGreg Roach margin: 0; 2702ebb07b4SGreg Roach padding: 0; /* required */ 2712ebb07b4SGreg Roach} 2722ebb07b4SGreg Roach#tv_tools li.tv_button { 2732ebb07b4SGreg Roach float: left; 2742ebb07b4SGreg Roach position: relative; 2752ebb07b4SGreg Roach padding: 0; /* required */ 2762ebb07b4SGreg Roach margin: 0; 2772ebb07b4SGreg Roach width: 24px; 2782ebb07b4SGreg Roach height: 24px; 2792ebb07b4SGreg Roach text-align: center; 2802ebb07b4SGreg Roach vertical-align: middle; 2812ebb07b4SGreg Roach border: thin solid #efefef; /* customizable */ 2822ebb07b4SGreg Roach background-color: #efefef; /* customizable */ 2832ebb07b4SGreg Roach border-radius: 4px; 2842ebb07b4SGreg Roach} 2852ebb07b4SGreg Roach#tvStylesSubmenu li.tv_button { 2862ebb07b4SGreg Roach float : none; 2872ebb07b4SGreg Roach} 2882ebb07b4SGreg Roach#tv_tools li.tv_button a { 2892ebb07b4SGreg Roach margin: 0; 2902ebb07b4SGreg Roach display: block; 2912ebb07b4SGreg Roach} 2922ebb07b4SGreg Roach#tv_tools li.tv_button:hover { 2932ebb07b4SGreg Roach border: thin outset #fdfffd; /* customizable */ 2942ebb07b4SGreg Roach cursor: pointer; 2952ebb07b4SGreg Roach} 2962ebb07b4SGreg Roach#tv_tools li.tvPressed { 2972ebb07b4SGreg Roach border: thin inset #ffffff; /* customizable */ 2982ebb07b4SGreg Roach} 2992ebb07b4SGreg Roach#tv_tools ul li img { 3002ebb07b4SGreg Roach border: none; 3012ebb07b4SGreg Roach margin: 0; 3022ebb07b4SGreg Roach padding: 0; 3032ebb07b4SGreg Roach width: 22px; 3042ebb07b4SGreg Roach height: 22px; 3052ebb07b4SGreg Roach cursor: pointer; 3062ebb07b4SGreg Roach text-align: center; 3072ebb07b4SGreg Roach vertical-align: middle; 3082ebb07b4SGreg Roach} 3092ebb07b4SGreg Roach#tv_tools ul li a.help img.icon { 3102ebb07b4SGreg Roach margin: 3px 0 0; 3112ebb07b4SGreg Roach padding: 0; 3122ebb07b4SGreg Roach width: 15px; 3132ebb07b4SGreg Roach height: 15px; 3142ebb07b4SGreg Roach} 3152ebb07b4SGreg Roach 3162ebb07b4SGreg Roach#tvToolsHandler { 3172ebb07b4SGreg Roach float: left; 3182ebb07b4SGreg Roach cursor: move; 3192ebb07b4SGreg Roach height: 22px; 3202ebb07b4SGreg Roach width: 2px; 3212ebb07b4SGreg Roach border: thin inset #f6f6f6; /* customizable */ 3222ebb07b4SGreg Roach margin: 2px; 3232ebb07b4SGreg Roach overflow: hidden; /* required for IE */ 3242ebb07b4SGreg Roach} 3252ebb07b4SGreg Roach 3262ebb07b4SGreg Roach#tvToolsHandler:hover { 3272ebb07b4SGreg Roach border: thin outset #f6f6f6; /* customizable */ 3282ebb07b4SGreg Roach} 3292ebb07b4SGreg Roach 3302ebb07b4SGreg Roach 3312ebb07b4SGreg Roach#tv_tree div.tv_box div.tvM, 3322ebb07b4SGreg Roach#tv_tree div.tv_box div.tvF { 3332ebb07b4SGreg Roach background: none; 3342ebb07b4SGreg Roach color: #000; 3352ebb07b4SGreg Roach border: 0; 3362ebb07b4SGreg Roach margin: 0; 3372ebb07b4SGreg Roach padding: 0 4px; 3382ebb07b4SGreg Roach} 3392ebb07b4SGreg Roach 3402ebb07b4SGreg Roach.tvM {background-color: #DDF !important;} 3412ebb07b4SGreg Roach.tvF {background-color: #FDD !important;} 3422ebb07b4SGreg Roach 3432ebb07b4SGreg Roach.dashed {border-top: thin dashed #81A9CB !important;} 344