1242a7862SGreg Roach/** 2242a7862SGreg Roach * webtrees: online genealogy 3*d11be702SGreg Roach * Copyright (C) 2023 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} 416f5bd0bfSGreg Roach:fullscreen .tv_out { 426f5bd0bfSGreg Roach height: 100% !important; 436f5bd0bfSGreg Roach} 442ebb07b4SGreg Roach 452ebb07b4SGreg Roach.tv_in { 462ebb07b4SGreg Roach clear: both; 472ebb07b4SGreg Roach cursor: move; 482ebb07b4SGreg Roach display: inline-block; /* prevent from blinking on IE */ 492ebb07b4SGreg Roach} 502ebb07b4SGreg Roach 512ebb07b4SGreg Roach.tv_in table.tv_tree, 522ebb07b4SGreg Roach.tv_in table.tv_tree tbody, 532ebb07b4SGreg Roach.tv_in table.tv_tree tr, 542ebb07b4SGreg Roach.tv_in table.tv_tree td { 552ebb07b4SGreg Roach border: 0 none; 562ebb07b4SGreg Roach padding: 0; 572ebb07b4SGreg Roach margin: 0; 582ebb07b4SGreg Roach background: none; 592ebb07b4SGreg Roach font-size: 11px; 602ebb07b4SGreg Roach} 612ebb07b4SGreg Roach.tv_in table.tv_tree { 622ebb07b4SGreg Roach border-collapse: collapse; 632ebb07b4SGreg Roach} 642ebb07b4SGreg Roach 652ebb07b4SGreg Roach#tvbCompact { 662ebb07b4SGreg Roach background-image: url(images/compact.png); 672ebb07b4SGreg Roach} 682ebb07b4SGreg Roach 692ebb07b4SGreg Roach/* Border (also have class table.tv_tree) */ 702ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_topleft { 712ebb07b4SGreg Roach background: none; 722ebb07b4SGreg Roach} 732ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_top { 742ebb07b4SGreg Roach background: none; 752ebb07b4SGreg Roach} 762ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_top div{ 772ebb07b4SGreg Roach font-family: Arial,Verdana,sans-serif; 782ebb07b4SGreg Roach font-size: 18px; 792ebb07b4SGreg Roach} 802ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_topright { 812ebb07b4SGreg Roach background: none; 822ebb07b4SGreg Roach} 832ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_left { 842ebb07b4SGreg Roach background: none; 852ebb07b4SGreg Roach} 862ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_right { 872ebb07b4SGreg Roach background: none; 882ebb07b4SGreg Roach} 892ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_bottomleft { 902ebb07b4SGreg Roach background: none; 912ebb07b4SGreg Roach} 922ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_bottom { 932ebb07b4SGreg Roach background: none; 942ebb07b4SGreg Roach} 952ebb07b4SGreg Roachtable#tvTreeBorder td#tv_tree_bottomright { 962ebb07b4SGreg Roach background: none; 972ebb07b4SGreg Roach} 982ebb07b4SGreg Roach/* tree */ 992ebb07b4SGreg Roachtable#tvTreeBorder td, 1002ebb07b4SGreg Roach#tv_tree { 1012ebb07b4SGreg Roach background: none; 1022ebb07b4SGreg Roach} 1032ebb07b4SGreg Roach 1042ebb07b4SGreg Roach/* horizontal and vertical lines color */ 1052ebb07b4SGreg Roach#tv_tree div.tv_vline, 1062ebb07b4SGreg Roach#tv_tree div.tv_hline { 1072ebb07b4SGreg Roach background-color: #81A9CB; /* customizable :should be the same color than in background images of td.tv_vline_x */ 1082ebb07b4SGreg Roach} 1092ebb07b4SGreg Roach 1102ebb07b4SGreg Roach/* TD container for a vertical line */ 1112ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline { 1122ebb07b4SGreg Roach width: 1px; 1132ebb07b4SGreg Roach background: repeat-x 50% 50%; 1142ebb07b4SGreg Roach height: 100%; /* required */ 1152ebb07b4SGreg Roach} 1162ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_h { 1172ebb07b4SGreg Roach background-image: url(images/vline.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */ 1182ebb07b4SGreg Roach} 1192ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_t { 1202ebb07b4SGreg Roach vertical-align: bottom; 1212ebb07b4SGreg Roach background-image: url(images/vline_t.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */ 1222ebb07b4SGreg Roach} 1232ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_b { 1242ebb07b4SGreg Roach vertical-align: top; 1252ebb07b4SGreg Roach background-image: url(images/vline_b.gif); /* customizable: image color must be the same color than div.tv_vline and div.tv_hline */ 1262ebb07b4SGreg Roach} 1272ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_c, 1282ebb07b4SGreg Roach.tv_in table.tv_tree td.tv_vline_h { 1292ebb07b4SGreg Roach vertical-align: middle; 1302ebb07b4SGreg Roach} 1312ebb07b4SGreg Roach#tv_tree table.tv_tree td.tv_vline_c { 1322ebb07b4SGreg Roach height: 1px; 1332ebb07b4SGreg Roach} 1342ebb07b4SGreg Roach/* vertical line drawing */ 1352ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline { 1362ebb07b4SGreg Roach width: 1px; 1372ebb07b4SGreg Roach} 1382ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_t, 1392ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_b { 1402ebb07b4SGreg Roach height: 50%; 1412ebb07b4SGreg Roach} 1422ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_c { 1432ebb07b4SGreg Roach height: 1px; 1442ebb07b4SGreg Roach overflow: hidden; /* required for IE */ 1452ebb07b4SGreg Roach} 1462ebb07b4SGreg Roach#tv_tree table.tv_tree div.tv_vline_h { 1472ebb07b4SGreg Roach height: 100%; 1482ebb07b4SGreg Roach} 1492ebb07b4SGreg Roach 1502ebb07b4SGreg Roach/* horizontal line drawing */ 1512ebb07b4SGreg Roach#tv_tree td.tv_hline, 1522ebb07b4SGreg Roach#tv_tree div.tv_hline { 1532ebb07b4SGreg Roach overflow: hidden; /* required for IE */ 1542ebb07b4SGreg Roach width: 8px; /* customizable */ 1552ebb07b4SGreg Roach} 1562ebb07b4SGreg Roach#tv_tree div.tv_hline { 1572ebb07b4SGreg Roach height: 1px; 1582ebb07b4SGreg Roach} 1592ebb07b4SGreg Roach 1602ebb07b4SGreg Roach/* Person or couple(s) box style */ 1612ebb07b4SGreg Roach#tv_tree div.tv_box { 1622ebb07b4SGreg Roach border: thin outset #81A9CB; /* customizable */ 1632ebb07b4SGreg Roach background: #fffdfd; /* customizable */ 1642ebb07b4SGreg Roach margin-top: 2px; 1652ebb07b4SGreg Roach margin-bottom: 2px; 1662ebb07b4SGreg Roach padding: 0; 1672ebb07b4SGreg Roach width: 180px; /* customizable:initial box width */ 1682ebb07b4SGreg Roach cursor: help; /* customizable */ 1692ebb07b4SGreg Roach border-collapse: collapse; /* required */ 1702ebb07b4SGreg Roach border-radius: 4px; /* customizable */ 1712ebb07b4SGreg Roach box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ 1722ebb07b4SGreg Roach} 1732ebb07b4SGreg Roach#tv_tree div.boxExpanded { 1742ebb07b4SGreg Roach width: 250px; /* customizable:initial expanded box width */ 1752ebb07b4SGreg Roach} 1762ebb07b4SGreg Roach#tv_tree div.tv_box div.tvM { 1772ebb07b4SGreg Roach background: #f5fdff; /* customizable */ 1782ebb07b4SGreg Roach color: #220000; /* customizable */ 1792ebb07b4SGreg Roach} 1802ebb07b4SGreg Roach#tv_tree div.tv_box div.tvF { 1812ebb07b4SGreg Roach background: #fff8f5; /* customizable */ 1822ebb07b4SGreg Roach color: #000022; /* customizable */ 1832ebb07b4SGreg Roach} 1842ebb07b4SGreg Roach#tv_tree div.tv_box span.tvSexSymbol { 1852ebb07b4SGreg Roach font-weight: bold; 1862ebb07b4SGreg Roach font-family: x-large, serif; /*Arial Unicode MS, monospace; /* customizable, BUT test required for ALL browsers */ 1872ebb07b4SGreg Roach vertical-align: top; 1882ebb07b4SGreg Roach margin: 1px; 1892ebb07b4SGreg Roach} 1902ebb07b4SGreg Roach#tv_tree div.tv_box span.tvM { 1912ebb07b4SGreg Roach color: #8f8fdf; /* customizable */ 1922ebb07b4SGreg Roach} 1932ebb07b4SGreg Roach#tv_tree div.tv_box span.tvF { 1942ebb07b4SGreg Roach color: #df8f8f; /* customizable */ 1952ebb07b4SGreg Roach} 1962ebb07b4SGreg Roach 1972ebb07b4SGreg Roach#tv_tree div.tv_box div.tvM, 1982ebb07b4SGreg Roach#tv_tree .tv_box div.tvF { 1992ebb07b4SGreg Roach clear: both; 2002ebb07b4SGreg Roach border: 0; 2012ebb07b4SGreg Roach margin: 0; 2022ebb07b4SGreg Roach padding: 1px 4px; 2032ebb07b4SGreg Roach border-radius: 4px; /* customizable */ 2042ebb07b4SGreg Roach} 2052ebb07b4SGreg Roach#tv_tree div.tv_box i.dates { 2062ebb07b4SGreg Roach float: right; 2072ebb07b4SGreg Roach font-size: 75%; 2082ebb07b4SGreg Roach margin-left: 4px; 2092ebb07b4SGreg Roach} 2102ebb07b4SGreg Roach#tv_tree div.tv_box img.tv_treelink { 2112ebb07b4SGreg Roach height: 15px; 2122ebb07b4SGreg Roach width: 15px; 2132ebb07b4SGreg Roach float: right; 2142ebb07b4SGreg Roach} 2152ebb07b4SGreg Roach#tv_tree div.tv_box img.tv_box_loading { 2162ebb07b4SGreg Roach height: 12px; 2172ebb07b4SGreg Roach width: 12px; 2182ebb07b4SGreg Roach margin: 2px; 2192ebb07b4SGreg Roach float: right; 2202ebb07b4SGreg Roach} 2212ebb07b4SGreg Roach#tv_tree div.tv_box div.tv_person_expanded { 2222ebb07b4SGreg Roach min-height: 55px; 2232ebb07b4SGreg Roach padding: 2px; 2242ebb07b4SGreg Roach} 2252ebb07b4SGreg Roach#tv_tree div.tv_box img { 2262ebb07b4SGreg Roach float: left; 2272ebb07b4SGreg Roach margin: 2px; 2282ebb07b4SGreg Roach max-height: 50px; 2292ebb07b4SGreg Roach max-width: 80px; 2302ebb07b4SGreg Roach width: auto; 2312ebb07b4SGreg Roach} 2321baf69deSGreg Roach#tv_tree div.tv_box .icon-silhouette { 2332ebb07b4SGreg Roach float: left; 2342ebb07b4SGreg Roach} 2352ebb07b4SGreg Roach#tv_tree div.tv_box div.tv_person_expanded a { 2362ebb07b4SGreg Roach font-weight: bold; 2372ebb07b4SGreg Roach} 2382ebb07b4SGreg Roach 2392ebb07b4SGreg Roach/* The toolbox style. Button's images come from the active theme */ 2402ebb07b4SGreg Roach#tv_tools, 2412ebb07b4SGreg Roach#tvStylesSubmenu { 2422ebb07b4SGreg Roach display: inline-block; 2432ebb07b4SGreg Roach position: absolute; 2442ebb07b4SGreg Roach left: 0; 2452ebb07b4SGreg Roach top: 0; 2462ebb07b4SGreg Roach padding: 0; 2472ebb07b4SGreg Roach margin: 0; /* required */ 2482ebb07b4SGreg Roach z-index: 90; /* should be < 100 because 100 is the z-index of WT menus */ 2492ebb07b4SGreg Roach background-color: #efefef; /* customizable */ 2502ebb07b4SGreg Roach border: 1px outset #dfdfdf; /* customizable */ 2512ebb07b4SGreg Roach border-radius: 4px; /* customizable */ 2522ebb07b4SGreg Roach box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ 2532ebb07b4SGreg Roach} 2542ebb07b4SGreg Roach 2552ebb07b4SGreg Roach/* styles submenu */ 2562ebb07b4SGreg Roach#tvStylesSubmenu { 2572ebb07b4SGreg Roach display: none; 2582ebb07b4SGreg Roach left: 0; 2592ebb07b4SGreg Roach top: 0; 2602ebb07b4SGreg Roach z-index: 91; /* just over tv_tools */ 2612ebb07b4SGreg Roach} 2622ebb07b4SGreg Roach 2632ebb07b4SGreg Roach#tv_tools ul { 2642ebb07b4SGreg Roach list-style: none; 2652ebb07b4SGreg Roach margin: 0; 2662ebb07b4SGreg Roach padding: 0; /* required */ 2672ebb07b4SGreg Roach} 2682ebb07b4SGreg Roach#tv_tools li.tv_button { 2692ebb07b4SGreg Roach float: left; 2702ebb07b4SGreg Roach position: relative; 2712ebb07b4SGreg Roach padding: 0; /* required */ 2722ebb07b4SGreg Roach margin: 0; 2732ebb07b4SGreg Roach width: 24px; 2742ebb07b4SGreg Roach height: 24px; 2752ebb07b4SGreg Roach text-align: center; 2762ebb07b4SGreg Roach vertical-align: middle; 2772ebb07b4SGreg Roach border: thin solid #efefef; /* customizable */ 2782ebb07b4SGreg Roach background-color: #efefef; /* customizable */ 2792ebb07b4SGreg Roach border-radius: 4px; 2802ebb07b4SGreg Roach} 2812ebb07b4SGreg Roach#tvStylesSubmenu li.tv_button { 2822ebb07b4SGreg Roach float : none; 2832ebb07b4SGreg Roach} 2842ebb07b4SGreg Roach#tv_tools li.tv_button a { 2852ebb07b4SGreg Roach margin: 0; 2862ebb07b4SGreg Roach display: block; 2872ebb07b4SGreg Roach} 2882ebb07b4SGreg Roach#tv_tools li.tv_button:hover { 2892ebb07b4SGreg Roach border: thin outset #fdfffd; /* customizable */ 2902ebb07b4SGreg Roach cursor: pointer; 2912ebb07b4SGreg Roach} 2922ebb07b4SGreg Roach#tv_tools li.tvPressed { 2932ebb07b4SGreg Roach border: thin inset #ffffff; /* customizable */ 2942ebb07b4SGreg Roach} 2952ebb07b4SGreg Roach#tv_tools ul li img { 2962ebb07b4SGreg Roach border: none; 2972ebb07b4SGreg Roach margin: 0; 2982ebb07b4SGreg Roach padding: 0; 2992ebb07b4SGreg Roach width: 22px; 3002ebb07b4SGreg Roach height: 22px; 3012ebb07b4SGreg Roach cursor: pointer; 3022ebb07b4SGreg Roach text-align: center; 3032ebb07b4SGreg Roach vertical-align: middle; 3042ebb07b4SGreg Roach} 3052ebb07b4SGreg Roach#tv_tools ul li a.help img.icon { 3062ebb07b4SGreg Roach margin: 3px 0 0; 3072ebb07b4SGreg Roach padding: 0; 3082ebb07b4SGreg Roach width: 15px; 3092ebb07b4SGreg Roach height: 15px; 3102ebb07b4SGreg Roach} 3112ebb07b4SGreg Roach 3122ebb07b4SGreg Roach#tvToolsHandler { 3132ebb07b4SGreg Roach float: left; 3142ebb07b4SGreg Roach cursor: move; 3152ebb07b4SGreg Roach height: 22px; 3162ebb07b4SGreg Roach width: 2px; 3172ebb07b4SGreg Roach border: thin inset #f6f6f6; /* customizable */ 3182ebb07b4SGreg Roach margin: 2px; 3192ebb07b4SGreg Roach overflow: hidden; /* required for IE */ 3202ebb07b4SGreg Roach} 3212ebb07b4SGreg Roach 3222ebb07b4SGreg Roach#tvToolsHandler:hover { 3232ebb07b4SGreg Roach border: thin outset #f6f6f6; /* customizable */ 3242ebb07b4SGreg Roach} 3252ebb07b4SGreg Roach 3262ebb07b4SGreg Roach 3272ebb07b4SGreg Roach#tv_tree div.tv_box div.tvM, 3282ebb07b4SGreg Roach#tv_tree div.tv_box div.tvF { 3292ebb07b4SGreg Roach background: none; 3302ebb07b4SGreg Roach color: #000; 3312ebb07b4SGreg Roach border: 0; 3322ebb07b4SGreg Roach margin: 0; 3332ebb07b4SGreg Roach padding: 0 4px; 3342ebb07b4SGreg Roach} 3352ebb07b4SGreg Roach 3362ebb07b4SGreg Roach.tvM {background-color: #DDF !important;} 3372ebb07b4SGreg Roach.tvF {background-color: #FDD !important;} 3382ebb07b4SGreg Roach 3392ebb07b4SGreg Roach.dashed {border-top: thin dashed #81A9CB !important;} 340