xref: /webtrees/resources/css/_chart-interactive.css (revision 1baf69dec287f195fbbefc3bae3c0b33957a89c3)
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