1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2018 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/* The FAB theme */ 17 18/* Colors for chart boxes, etc. */ 19:root { 20 --sex-f-fg: #9c3163; 21 --sex-m-fg: #31639c; 22 --sex-u-fg: #319c43; 23 --sex-f-bg: #ffdddd; 24 --sex-m-bg: #ddddff; 25 --sex-u-bg: #ddffdd; 26} 27 28/* Override Bootstrap formatting */ 29.btn-link { 30 padding-left: 0.25rem; 31 padding-right: 0.25rem; 32} 33 34.table-given-name { 35 overflow-x: hidden; 36} 37 38.container-fluid { 39 padding-left: 5px; 40 padding-right: 5px; 41} 42 43table { 44 border-collapse: separate; 45} 46 47/* 48 * Pages have the following high-level structure: 49 * 50 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 51 * +---wt-header-wrapper 52 * +---wt-header-container 53 * | +---wt-header-content 54 * | +---wt-accessibility-links 55 * | +---wt-site-logo 56 * | +---wt-site-title 57 * | +---wt-header-search 58 * | | +---wt-header-search-form 59 * | | +---wt-header-search-field 60 * | | +---wt-header-search-button 61 * | +---wt-secondary-navigation 62 * | | +---wt-secondary-menu 63 * | +---wt-primary-navigation 64 * | +---wt-primary-menu 65 * +---wt-main-container 66 * | +---wt-main-content 67 * | +---wt-messages 68 * | +---wt-page-title 69 * | +---wt-page-options wt-page-options-xxxxx 70 * | +---wt-page-content 71 * +---wt-footers 72 * +---wt-footer wt-footer-contact 73 * +---wt-footer wt-footer-cookies 74 * +---wt-footer wt-footer-page-views 75 * +---wt-footer wt-footer-powered-by 76 */ 77 78.wt-global { 79 /* Prevent redraws when dynamic content requires a scrollbar. */ 80 overflow-y: scroll; 81 /* Keep the page as tall as the window, so the footer can remain at the bottom. */ 82 display: flex; 83 min-height: 100vh; 84 flex-direction: column; 85 /* Any wide content will have its own horizontal scrollbar */ 86 overflow-x: hidden; 87 color: #555; 88} 89 90.wt-header-wrapper { 91} 92 93.wt-header-container { 94 background-color: #eee; 95} 96 97.wt-header-content { 98} 99 100.wt-accessibility-links { 101} 102 103.wt-site-logo { 104 display: none; 105} 106 107.wt-site-title { 108 order: 1; 109 flex: 1 1 0; 110 font-size: 1.5rem; 111 color: #888; 112} 113 114.wt-header-search { 115 order: 3; 116 flex: 0 0 15rem; 117} 118 119.wt-header-search-form { 120} 121 122.wt-header-search-field { 123} 124 125.wt-header-search-button { 126} 127 128.wt-secondary-navigation { 129 order: 2; 130 flex: 0 0 0; 131 white-space: nowrap; 132} 133 134.wt-secondary-menu { 135 flex-wrap: nowrap; 136} 137 138.wt-secondary-menu .nav-link { 139 display: inline-block; 140 padding: 0.5rem; 141} 142 143.wt-secondary-menu .nav-item::after { 144 content: "|"; 145} 146 147.wt-secondary-menu .dropdown-toggle::after { 148 display: none; 149} 150 151.wt-primary-navigation { 152 order: 4; 153 flex: 0 0 100%; 154 background-color: #eee; 155} 156 157.wt-primary-menu { 158 justify-content: center; 159} 160 161.wt-primary-menu .dropdown-toggle::after { 162 display: none; 163} 164 165.wt-primary-menu .nav-link { 166 white-space: nowrap; 167 display: inline-block; 168 padding: 0.5rem; 169} 170 171.wt-primary-menu .nav-item + .nav-item::before { 172 content: "|"; 173} 174 175.wt-main-container { 176 /* Grow to fill content, to allow footer to stay at bottom of page. */ 177 flex: 1; 178 /* Space between the header/footer and the main content. */ 179 padding-top: 1rem; 180 padding-bottom: 1rem; 181} 182 183.wt-main { 184} 185 186.wt-messages { 187} 188 189.wt-page-title { 190 text-align: center; 191} 192 193.wt-page-options .form-group { 194 margin-bottom: 0; 195} 196 197.wt-page-options-label { 198 background-color: #ccc; 199 border-left: 2px solid transparent; 200 border-right: 2px solid transparent; 201 Color: #555; 202 font-weight: bold; 203} 204 205.wt-page-options-value { 206 background-color: #ddd; 207 border: 1px solid #fff; 208 border-top: 1px solid #ddd; 209 210 padding: 0.25rem 0.75rem; 211} 212 213.wt-page-content { 214 margin-top: 1rem; 215} 216 217.wt-footers { 218} 219 220.wt-footer { 221} 222 223.wt-footer-contact { 224} 225 226.wt-footer-cookies { 227 background: #aaa; 228 color: #fff; 229 transition: height 0.5s; 230} 231 232.wt-footer-page-views { 233} 234 235.wt-footer-powered-by { 236} 237 238.wt-footer-powered-by-webtrees { 239 width: 100px; 240 height: 21px; 241 content: url(images/powered-by-webtrees.png); 242} 243 244/* 245 * The tree/user home pages 246 * 247 * wt-home-page / wt-user-page 248 * +---wt-main-blocks 249 * | +---wt-block, wt-block-AAA 250 * | +---wt-block, wt-block-BBB 251 * | +---wt-block, wt-block-CCC 252 * +---wt-side-blocks 253 * +---wt-block, wt-block-XXX 254 * +---wt-block, wt-block-YYY 255 * +---wt-block, wt-block-ZZZ 256 * 257 * Each block as the structure 258 * wt-block, wt-block-XXX 259 * +---wt-block-header, wt-block-header-XXX 260 * +---wt-block-content, wt-block-content-XXX 261 */ 262 263.wt-block { 264 background-color: #eee; 265 padding: 3px; 266 vertical-align: top; 267} 268 269.wt-block-header { 270 background-color: #eee; 271 border-bottom: 0; 272 font-weight: bold; 273} 274 275.wt-block-content { 276} 277 278.blockcontent .list_table { 279 border-right: 0; 280} 281 282.blockcontent .list_value, 283.blockcontent .list_value_wrap { 284 border: 0; 285} 286 287/* 288 * The individual page. 289 * 290 * wt-route-individual 291 * +---wt-header-wrapper 292 */ 293 294.wt-individual-silhouette { 295 content: url(images/individual-silhouette-unknown.png); 296} 297 298/* Mirror the image on RTL pages */ 299[dir=rtl] .wt-individual-silhouette { 300 transform: scale(-1, 1); 301} 302 303.wt-individual-silhouette-F { 304 content: url(images/individual-silhouette-female.png); 305} 306 307.wt-individual-silhouette-M { 308 content: url(images/individual-silhouette-male.png); 309} 310 311/* 312 * Ancestors chart 313 * 314 * wt-chart, wt-ancestors-chart 315 * +---wt-ancestors-chart-list 316 * +---wt-ancestors-chart-list-item 317 * +--- 318 * +---wt-ancestors-chart-list 319 * +---wt-ancestors-chart-list-item 320 * +---... 321 */ 322.wt-ancestors-chart-list { 323} 324 325.wt-ancestors-chart-list-item { 326} 327 328/* 329 * Compact chart 330 * 331 * wt-chart, wt-compact-chart 332 */ 333 334.wt-ancestors-chart-list-item { 335} 336 337/* 338 * Descendants chart 339 * 340 * wt-chart, wt-descendants-chart 341 * +---wt-descendants-chart-list 342 * +---wt-descendants-chart-list-item 343 */ 344.wt-descendants-chart-list { 345} 346 347.wt-descendants-chart-list-item { 348} 349 350/* 351 * Family book chart 352 * 353 * wt-chart, wt-family-book-chart 354 */ 355 356/* 357 * Fan chart 358 * 359 * wt-chart, wt-fan-chart 360 */ 361 362/* 363 * Hourglass chart 364 * 365 * wt-chart, wt-hourglass-chart 366 */ 367 368/* 369 * Hourglass chart 370 * 371 * wt-chart, wt-interactive-tree 372 */ 373 374/* 375 * Lifespans chart 376 * 377 * wt-chart, wt-lifespans-chart 378 */ 379 380/* 381 * Pedigree chart 382 * 383 * wt-chart, wt-pedigree-chart 384 */ 385 386/* 387 * Pedigree map 388 * 389 * wt-chart, wt-pedigree-map 390 */ 391 392/* 393 * Relationships chart 394 * 395 * wt-chart, wt-relationships-chart 396 */ 397 398/* 399 * Statistics chart 400 * 401 * wt-chart, wt-statistics-chart 402 */ 403 404/* 405 * Timeline chart 406 * 407 * wt-chart, wt-timeline-chart 408 */ 409 410/* 411 * Family list and individual list 412 * 413 * wt-page-options 414 * +---wt-initials-list, wt-initials-list-surnames 415 * +---wt-initial-list-item 416 * +---wt-initial 417 * +---wt-initial, active 418 * +---wt-initials-list, wt-initials-list-given-names 419 * +---wt-initial-list-item 420 * +---wt-initial 421 * +---wt-initial, active 422 * wt-page-content 423 * +---wt-list, wt-{family,individual}-list 424 */ 425 426.wt-initials-list { 427 font-size: 1.25rem; 428} 429 430.wt-initials-list-item { 431 display: inline; 432} 433 434.wt-initials-list-item + .wt-initials-list-item::before { 435 content: '|'; 436} 437 438.wt-initial { 439} 440 441.wt-initial.active { 442 color: #f00; 443 font-weight: bold; 444} 445 446/* 447 * Media object list 448 * 449 * wt-list, wt-media-list 450 */ 451 452/* 453 * Note object list 454 * 455 * wt-list, wt-note-list 456 */ 457 458/* 459 * Source list 460 * 461 * wt-list, wt-source-list 462 */ 463 464/* 465 * Repository list 466 * 467 * wt-list, wt-repository-list 468 */ 469 470/* 471 * Branches list 472 * 473 * wt-branches-page 474 */ 475 476/* 477 * Place hierarchy 478 * 479 * wt-place-hierarchy-page 480 */ 481 482/* 483 * Calendar 484 * 485 * wt-calendar-page 486 */ 487 488/* 489 * Reports 490 * 491 * wt-reports-page 492 */ 493 494/* 495 * Search 496 * 497 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page 498 */ 499 500/* ====== Round Corners ======== */ 501.border1, 502.block, 503.descriptionbox, 504.list_label, 505.list_label_wrap, 506.list_value, 507.list_value_wrap, 508.messagebox, 509.optionbox, 510.person_box, 511.person_boxF, 512.person_boxNN, 513.person0, 514.person1, 515.person2, 516.person3, 517.person4, 518.person5, 519#indi_main_blocks, 520#tabs, 521.topbottombar { 522 margin: 4px; 523 padding: 4px; 524 border-radius: 4px; 525} 526 527/* ios on click workaround */ 528.iconz { 529 cursor: pointer; 530} 531 532a { 533 text-decoration: none; 534} 535 536a:hover, 537a:active { 538 color: #369; 539 text-decoration: underline; 540} 541 542a:link, 543a:visited { 544 color: #369; 545} 546 547:focus { 548 outline-style: none; 549} 550 551.flash-messages { 552 clear: both; 553 text-align: center; 554} 555 556dl { 557 margin: 0; 558} 559 560dt { 561 float: left; 562 font-weight: bold; 563 margin-right: 10px; 564} 565 566#mycart a img { 567 height: 15px; 568} 569 570.button { 571 width: 60px; 572} 573 574.alpha_index { 575 color: #999; 576} 577 578.person_box, 579.person_boxF, 580.person_boxNN { 581 margin: 0; 582 border: 1px solid #ccc; 583} 584 585.person_box_template .details0, 586.person_box_template .details1 { 587 font-size: 11px; 588} 589 590.person_box, .action_header { 591 padding: 3px; 592 background-color: #ddf; 593} 594 595.person_boxF, .action_headerF { 596 padding: 3px; 597 background-color: #fdd; 598} 599 600.person_boxNN { 601 padding: 3px; 602 background-color: #dfd; 603} 604 605.person_box:target, 606.news_box:target, 607#gedcom_stats:target { 608 background-color: #ffc; 609} 610 611/* families tab person box */ 612#relatives_content .person_box > .person_box, 613#relatives_content .person_boxF > .person_boxF, 614#relatives_content .person_boxNN > .person_boxNN { 615 border: 0; 616 min-height: 50px; 617} 618 619.center { 620 text-align: center; 621} 622 623table.center { 624 margin-left: auto; 625 margin-right: auto; 626} 627 628.list_table { 629 margin: 0 auto; 630} 631 632.list_label, 633.list_label_wrap { 634 background-color: #ccc; 635 font-weight: bold; 636 text-align: center; 637} 638 639.list_value, 640.list_value_wrap { 641 background-color: #ddd; 642 vertical-align: top; 643} 644 645.list_label, 646.list_value { 647 white-space: nowrap; 648} 649 650.list_label_wrap, 651.list_value_wrap { 652 white-space: normal; 653} 654 655div.fact_SHARED_NOTE { 656 clear: both; 657} 658 659/* Table of genealogical facts */ 660 661.wt-facts-table caption { 662 caption-side: top; 663} 664 665.wt-facts-table th { 666 background-color: #ccc; 667 border-radius: 4px; 668 text-align: center; 669 font-weight: normal; 670 min-width: 20%; 671} 672 673.wt-facts-table td { 674 border-radius: 4px; 675 background-color: #ddd; 676} 677 678.wt-facts-table .wt-gender-M td { 679 background-color: #ddf; 680} 681 682.wt-facts-table .wt-gender-F td { 683 background-color: #fdd; 684} 685 686.tabs_table { 687 width: 99%; 688} 689 690 691 692.name1, .name2 { 693 color: #337; 694} 695 696a:hover, a:hover .name1, a:hover .name2 { 697 color: #f00; 698} 699 700a:hover .nameZoom { 701 font-size: 16px; 702 font-weight: bold; 703} 704 705.nameZoom { 706 color: #555; 707 font-size: 16px; 708 font-weight: bold; 709} 710 711.details_label { 712 font-weight: bold; 713} 714 715.name_head { 716 color: #555; 717 font-size: 16px; 718 font-weight: bold; 719 line-height: 2; 720 padding: 0 5px; 721} 722 723.date { 724 color: #337; 725} 726 727.label { 728 font-weight: bold; 729} 730 731.error { 732 color: #f00; 733 font-weight: bold; 734} 735 736.largeError { 737 color: #f00; 738 font-weight: bold; 739} 740 741.warning { 742 color: #f00; 743 font-weight: bold; 744} 745 746.indent { 747 padding-left: 7px; 748} 749 750.image { 751 height: 150px; 752 padding: 5px; 753 margin: 2px; 754} 755 756.gender_image { 757 margin: 0 3px; 758 border: 0; 759 vertical-align: middle; 760} 761 762.thumbnail { 763 height: auto; 764 padding: 3px; 765} 766 767.icon { 768 border: 0; 769 padding: 0 5px; 770} 771 772.sublinks_cell { 773 background-color: #ccc; 774} 775 776.submenu .icon { 777 vertical-align: middle; 778 width: 20px; 779 height: 20px; 780} 781 782.subheaders { 783 font-weight: bold; 784 font-size: 15px; 785 margin-top: 15px; 786 vertical-align: bottom; 787} 788 789#family-table .subheaders:first-child { 790 width: 295px; 791} 792 793.parentdeath { 794 padding: 1px; 795} 796 797.source_citations { 798 display: none; 799} 800 801.selected-option { 802 background-color: #d6e0ea; 803} 804 805.border1 { 806 border: 0; 807} 808 809.menuitem { 810 text-decoration: none; 811 font-size: 11px; 812 padding: 1px; 813} 814 815.menuitem_hover { 816 text-decoration: none; 817 font-size: 11px; 818 padding: 1px; 819} 820 821.menuitem .icon, .menuitem_hover .icon { 822 width: 50px; 823 height: 50px; 824} 825 826.submenu { 827 text-decoration: none; 828 font-size: 11px; 829 background-color: #eee; 830 border: thin #aaa; 831 visibility: hidden; 832 position: absolute; 833 padding: 5px; 834} 835 836.submenuitem { 837 vertical-align: middle; 838 font-size: 11px; 839 height: 20px; 840 text-decoration: none; 841 background-color: #eee; 842 padding: 1px; 843 white-space: nowrap; 844} 845 846.submenuitem_hover { 847 vertical-align: middle; 848 height: 20px; 849 font-size: 11px; 850 background-color: #eee; 851 white-space: nowrap; 852 padding: 1px; 853} 854 855.submenuitem a, 856.submenuitem_hover a { 857 display: inline-block; 858 vertical-align: middle; 859} 860 861.journal_box { 862 padding: 3pt; 863 border: thin solid #aaa; 864 overflow: visible; 865} 866 867.news_box { 868 background-color: #ccc; 869 border-top: none; 870} 871 872.news_title { 873 font-weight: bold; 874 font-size: 14px; 875} 876 877.news_date { 878 margin-bottom: 12px; 879} 880 881.current_day { 882 font-weight: bold; 883 font-size: 16px; 884} 885 886.cal_day { 887 float: left; 888 font-weight: bold; 889} 890 891.rtl_cal_day { 892 direction: rtl; 893 float: right; 894 color: #00f; 895 font-weight: bold; 896} 897 898.helpcontent { 899 margin-left: 10px; 900 margin-right: 10px; 901} 902 903.helpcontent dt { 904 clear: both; 905} 906 907#user-page h1 { 908 margin: 0.25em auto 0.6em; 909} 910 911.tvertline { 912 vertical-align: bottom; 913} 914 915#childbox { 916 padding: 5px; 917 position: absolute; 918 display: none; 919 text-align: start; 920 white-space: nowrap; 921 top: 20px; 922 left: 0; 923} 924 925.layout3 #childbox { 926 top: auto; 927 bottom: 20px; 928} 929 930#childbox a.name1 { 931 display: block; 932 margin-left: 5px; 933} 934 935.person0 { 936 background-color: #aaf; 937 vertical-align: top; 938} 939 940.person1 { 941 background-color: #afa; 942 vertical-align: top; 943} 944 945.person2 { 946 background-color: #faa; 947 vertical-align: top; 948} 949 950.person3 { 951 background-color: #55f; 952 vertical-align: top; 953} 954 955.person4 { 956 background-color: #f55; 957 vertical-align: top; 958} 959 960.person5 { 961 background-color: #5f5; 962 vertical-align: top; 963} 964 965.listlog { 966 line-height: 20pt; 967} 968 969.starredname { 970 text-decoration: underline; 971} 972 973.search_hit { 974 background-color: #ff0; 975} 976 977.search_item { 978 font-weight: 600; 979} 980 981.topbottombar, 982.descriptionbox { 983 font-weight: bold; 984 background-color: #ccc; 985 vertical-align: top; 986} 987 988.descriptionbox { 989 font-size: 14px; 990 background-color: #ccc; 991 vertical-align: top; 992 padding: 3px; 993} 994 995.optionbox { 996 background-color: #ddd; 997 color: #000; 998 vertical-align: top; 999 white-space: nowrap; 1000 padding: 3px; 1001} 1002 1003.vmiddle { 1004 vertical-align: middle; 1005} 1006 1007.red { 1008 color: #f00; 1009} 1010 1011.wt-relation-fact, 1012.wt-historic-fact { 1013 opacity: 0.8; 1014} 1015 1016.messagebox { 1017 background-color: #bce; 1018} 1019 1020/* ---Pending edits--- */ 1021.new { 1022 outline: solid #00f 1px; 1023} 1024 1025.old { 1026 outline: solid #f00 1px; 1027} 1028 1029.tag_cloud { 1030 text-align: center; 1031} 1032 1033.tag_cloud a { 1034 white-space: nowrap; 1035} 1036 1037.nowrap { 1038 white-space: nowrap; 1039} 1040 1041.wrap { 1042 white-space: normal; 1043} 1044 1045.statistics-page { 1046 text-align: center; 1047} 1048 1049.center2 { 1050 text-align: center; 1051} 1052 1053.gchart { 1054 border: 0; 1055} 1056 1057/* ---Find special characters--- */ 1058.largechars { 1059 font-family: monospace; 1060 font-size: 200%; 1061} 1062 1063#facts_content dd { 1064 float: left; 1065 width: 70%; 1066} 1067 1068.clearfloat { 1069 clear: both; 1070} 1071 1072/* this keeps the tag color the same when it is a link as when not */ 1073 1074.place { 1075 padding-top: 5px; 1076} 1077 1078#pending h2 { 1079 text-align: center; 1080 margin-bottom: 20px; 1081} 1082 1083#pending h3 { 1084 text-align: center; 1085 margin-top: 20px; 1086} 1087 1088#pending .list_value { 1089 padding: 3px; 1090 text-align: center; 1091 vertical-align: middle; 1092 white-space: nowrap; 1093} 1094 1095#pending .indent { 1096 padding: 0; 1097} 1098 1099/* ======== Person box ======= */ 1100.gedcom_favorites_block, 1101.user_favorites_block, 1102.person_box_template { 1103 overflow: visible !important; 1104} 1105 1106/* Box styles are 1107 0 compact view 1108 1 normal view - small box 1109 2 normal view - large box 1110*/ 1111.box-style0 { 1112 cursor: n-resize; 1113} 1114 1115.box-style0-expanded { 1116 cursor: n-resize; 1117} 1118 1119.box-style0-expanded, 1120.box-style1-expanded { 1121 width: 300px !important; 1122 height: auto !important; 1123 line-height: 1.5em!important; 1124} 1125 1126.person_box_template { 1127 height: auto; 1128 white-space: normal; 1129 overflow: hidden !important; 1130} 1131 1132.person_box_template .namedef i[class^="icon-sex"] { 1133 margin-left: 3px; 1134} 1135 1136.person_box_template .icons { 1137 float: right; 1138} 1139 1140.person_box_template .inout { 1141 clear: both; 1142 display: none; 1143} 1144 1145.person_box_template .chart_textbox { 1146 overflow: hidden; 1147 font-size: .75rem; 1148 line-height: 1; 1149 padding-bottom: 4px; 1150} 1151 1152.person_box_template .chart_textbox .name1{ 1153 line-height: 1; 1154 font-weight: bold; 1155} 1156 1157.person_box_template img, 1158.person_box_template a.gallery { 1159 float: left; 1160 height: 50px; 1161 margin: 0 2px 0 0; 1162 max-width: 80px; 1163 width: auto; 1164} 1165 1166.person_box_template i[class^="icon-silhouette"] { 1167 float: left; 1168} 1169 1170/* --- reportengine.php --- */ 1171#reportengine-page table { 1172 margin: 20px auto; 1173} 1174 1175#reportengine-page .report-type { 1176 overflow: hidden; 1177 margin: auto; 1178 width: 180px; 1179} 1180 1181#reportengine-page .report-type div { 1182 float: left; 1183 margin: 0 20px; 1184} 1185 1186#reportengine-page .report-type p { 1187 margin: 0; 1188 text-align: center; 1189} 1190 1191/* styles for popup menus */ 1192.itr { 1193 position: absolute; 1194 line-height: 1.5; 1195} 1196 1197.popup { 1198 position: absolute; 1199 top: 20px; 1200 right: 0; 1201 left: auto; 1202 visibility: hidden; 1203 opacity: 0; 1204 transition: visibility 0s ease .25s,opacity .25s ease; 1205 z-index: 9999; 1206 box-shadow: 5px 5px 5px 0 rgba(0,0,0,.4); 1207} 1208 1209.popup ul { 1210 white-space: nowrap; 1211 list-style: none; 1212 margin: 0; 1213 padding: 0 10px; 1214 font-size: smaller; 1215} 1216 1217.popup > ul { 1218 padding: 2px 10px; 1219} 1220 1221.popup li .NAME { 1222 padding: 0 5px; 1223} 1224 1225.itr:hover .popup { 1226 visibility: visible; 1227 opacity: 1; 1228 transition-delay: 0s; 1229} 1230 1231/* styles for FindFacts pop-up */ 1232#layDefinedTags, 1233#tabDefinedTagsShow { 1234 width: 450px; 1235} 1236 1237#tabDefinedTags { 1238 width: 430px; 1239} 1240 1241#layDefinedTags { 1242 margin-left: auto; 1243 margin-right: auto; 1244 height: 285px; 1245 overflow: auto; 1246} 1247 1248#tabDefinedTags { 1249 border-collapse: collapse; 1250} 1251 1252#tabDefinedTags th, 1253#tabDefinedTags td { 1254 border: solid 1px #000; 1255 margin: 0; 1256 padding: 3px; 1257} 1258 1259#tabDefinedTags tbody th { 1260 text-align: left; 1261 font-weight: bold; 1262} 1263 1264#tabDefinedTags tr.sel { 1265 background-color: #cde; 1266 color: #888; 1267} 1268 1269#tabDefinedTags tr.unsel { 1270 background-color: #fff; 1271 color: #888; 1272} 1273 1274#tabDefinedTagsShow { 1275 margin-left: auto; 1276 margin-right: auto; 1277} 1278 1279#tabDefinedTagsShow td { 1280 width: 50%; 1281 text-align: center; 1282} 1283 1284#tabFilterAndCustom { 1285 margin-left: auto; 1286 margin-right: auto; 1287} 1288 1289#tabAction { 1290 margin-left: auto; 1291 margin-right: auto; 1292} 1293 1294#tabAction td { 1295 width: 50%; 1296 text-align: center; 1297} 1298 1299/* ======== List styles ====== */ 1300 1301.recent_changes_block, 1302.upcoming_events_block, 1303.todays_events_block, 1304.todo_block { 1305 width: 98%; 1306} 1307 1308.surname-list, 1309.givn-list { 1310 margin: 5px auto; 1311} 1312 1313.source-list table, 1314.note-list table, 1315.repo-list table, 1316.media-list table, 1317.indi-list table, 1318.fam-list table { 1319 width: 100%; 1320} 1321 1322.source-list td, 1323.note-list td, 1324.repo-list td, 1325.media-list td, 1326.indi-list td, 1327.fam-list td, 1328.recent_changes_block td, 1329.upcoming_events_block td, 1330.surname-list td, 1331.givn-list td { 1332 padding: 2px 5px; 1333} 1334 1335.indi-list td, 1336.fam-list td { 1337 color: #555; 1338} 1339 1340.surname-list td { 1341 vertical-align: top; 1342} 1343 1344.indi-list .stats, 1345.fam-list .stats { 1346 margin: 0 auto; 1347 width: auto; 1348} 1349 1350.source-list th, 1351.note-list th, 1352.repo-list th, 1353.media-list th, 1354.indi-list th, 1355.fam-list th, 1356.wt-table-changes th, 1357.wt-table-events th, 1358.wt-table-tasks th, 1359.wt-table-yahrzeits th, 1360.surname-list th, 1361.givn-list th { 1362 cursor: pointer; 1363 font-weight: 600; 1364 padding: 2px 4px; 1365 white-space: nowrap; 1366} 1367 1368.source-list th:last-child, 1369.note-list th:last-child, 1370.repo-list th:last-child { 1371 margin: 0 -2px 1px 1px; 1372 padding: 3px 0 4px; 1373 width: 24px; 1374} 1375 1376.givn-list th { 1377 cursor: pointer; 1378 white-space: nowrap; 1379 padding: 2px; 1380 text-align: center; 1381} 1382 1383#source-details h2, 1384#sourcelist-page h2, 1385#note-details h2, 1386#notelist-page h2, 1387#repo-details h2, 1388#repolist-page h2, 1389#media-details h2, 1390#statistics-page h2 { 1391 margin-bottom: 20px; 1392 text-align: center; 1393} 1394 1395#source-edit, 1396#note-edit, 1397#repo-edit, 1398#media-edit { 1399 overflow-x: auto; 1400} 1401 1402.media-list td img { 1403 display: block; 1404 height: 40px; 1405 width: auto; 1406 margin: 3px auto; 1407} 1408 1409.filtersH, 1410.filtersF { 1411 margin: 4px; 1412} 1413 1414.filtersH img { 1415 margin-bottom: 2px; 1416} 1417 1418.list-charts { 1419 text-align: center; 1420} 1421 1422#search-result-tabs h3 { 1423 text-align: center; 1424} 1425 1426#searchAccordion-indi, 1427#searchAccordion-fam, 1428#searchAccordion-source, 1429#searchAccordion-note { 1430 margin: auto; 1431 width: 99%; 1432} 1433 1434#place-hierarchy h2, 1435#place-hierarchy h4 { 1436 text-align: center; 1437} 1438 1439#main_select, 1440#available_select, 1441#right_select { 1442 min-width: 150px; 1443} 1444 1445.user_welcome_block table, 1446.gedcom_block_block table { 1447 margin: auto; 1448} 1449 1450.user_welcome_block td, 1451.gedcom_block_block td { 1452 width: 33%; 1453 text-align: center; 1454 vertical-align: top; 1455} 1456 1457/* ==== Favourites block ===== */ 1458.blockcontent .person_box_template .details2 { 1459 min-height: 40px; 1460} 1461 1462.blockcontent [class*='box-style2'] { 1463 margin: 5px 0; 1464} 1465 1466.add_fav_head { 1467 font-weight: 900; 1468 margin: 5px 0; 1469} 1470 1471.add_fav_head i { 1472 margin: 0 5px 1px; 1473} 1474 1475.add_fav_ref label { 1476 display: inline-block; 1477 min-width: 100px; 1478} 1479 1480.add_fav_ref input { 1481 margin: 0 5px; 1482} 1483 1484/* === Who is online block === */ 1485.logged_in_list { 1486 margin: 5px 0 0; 1487 padding: 0; 1488 line-height: 20px; 1489} 1490 1491/* ==== Theme select block === */ 1492.theme_form ul { 1493 margin: -10px auto; 1494} 1495 1496.theme_form li { 1497 visibility: hidden; 1498} 1499 1500.theme_form li ul li { 1501 display: inline-block; 1502 padding: 10px; 1503 visibility: visible; 1504} 1505 1506/* ==== FAQ table styles ===== */ 1507table.faq { 1508 background-color: #ddd; 1509 margin: 5px 0 50px 5px; 1510 width: 98%; 1511} 1512 1513table.faq tr:nth-child(odd) td { 1514 background-color: #eee; 1515} 1516 1517div.faq_title { 1518 background-color: #ddd; 1519 margin: 1em 0; 1520 padding: .25em; 1521 font-weight: bold; 1522 width: 98%; 1523} 1524 1525div.faq_body { 1526 clear: both; 1527 padding: 0 1em; 1528} 1529 1530.faq_top { 1531 float: right; 1532} 1533 1534/* === Positioning edit, copy, delete links === */ 1535/* General use */ 1536.editfacts { 1537 clear: left; 1538 padding-top: 15px; 1539} 1540 1541/* ======== Indi header ====== */ 1542#indi_header { 1543 overflow: hidden; 1544 border-radius: 4px; 1545 margin-bottom: 5px; 1546 width: 98%; 1547} 1548 1549#indi_header h3 { 1550 color: #369; 1551 font-size: 90%; 1552 font-weight: bold; 1553 margin: 0; 1554 padding: 0 10px 0 30px; 1555 text-align: left; 1556 overflow: hidden; 1557 position: relative; 1558} 1559 1560#indi_header .name_one { 1561 font-size: 1.5em; 1562} 1563 1564#indi_header h3 .details1 { 1565 font-size: 1.0em; 1566} 1567 1568#indi_header h3.person_box, 1569#indi_header h3.person_boxF, 1570#indi_header h3.person_boxNN { 1571 border: 0; 1572} 1573 1574#indi_header h3 .header_age { 1575 padding: 5px 0 5px 5px; 1576 float: right; 1577 font-weight: normal; 1578 font-size: 65%; 1579} 1580 1581#indi_header h3 a { 1582 display: inline; 1583} 1584 1585#indi_header a { 1586 color: #337; 1587 font-size: 0.75em; 1588 font-weight: normal; 1589} 1590 1591#indi_header a:hover { 1592 color: #f00; 1593} 1594 1595#indi_mainimage { 1596 float: right; 1597} 1598 1599#header_accordion1 { 1600 padding: 0 10px 0 0; 1601 overflow: hidden; 1602} 1603 1604#header_accordion1 .indi_name_details { 1605 margin: 0; 1606 overflow: hidden; 1607 padding: 5px; 1608} 1609 1610.indi_name_details .name1 { 1611 font-weight: normal; 1612 padding-top: 5px; 1613 font-size: inherit; 1614} 1615 1616#indi_header a.warning { 1617 color: #f00; 1618 font-size: 1em; 1619} 1620 1621#indi_note { 1622 margin: 0 0 5px; 1623} 1624 1625.indi_table { 1626 clear: left; 1627} 1628 1629#sex { 1630 float: right; 1631} 1632 1633#dates { 1634 color: #369; 1635 float: right; 1636} 1637 1638#individual-names .wt-icon-edit, 1639#individual-names .wt-icon-delete { 1640 float: right; 1641} 1642 1643#indi_note .fact_NOTE { 1644 float: left; 1645 margin: 0 5px 0 0; 1646} 1647 1648#indi_note .fact_SOUR { 1649 margin: 3px 0; 1650} 1651 1652#indi_note .fact_SOUR a { 1653 font-size: 100%; 1654} 1655 1656#indi_note .fact_NOTE, 1657#indi_note .fact_SOUR { 1658 clear: both; 1659} 1660 1661/* ===== markdown formatting ===== */ 1662 1663.markdown { 1664 /* Tables and pre-formatted text can break the layout. */ 1665 overflow-x: auto; 1666} 1667 1668.markdown p { 1669 margin: 0 0 0.5em; 1670 white-space: pre-wrap; 1671} 1672 1673.markdown table { 1674 border-collapse: collapse; 1675 font-size: 10px; 1676 margin-bottom: 8px; 1677} 1678 1679.markdown th { 1680 font-weight: bold; 1681} 1682 1683.markdown td, 1684.markdown th { 1685 border: solid thin #000; 1686 padding: 3px; 1687} 1688 1689.odometer { 1690 font-family: courier, monospace; 1691 font-weight: bold; 1692 background: #000; 1693 color: #fff; 1694} 1695 1696/* ======== Indi tabs ======== */ 1697/* Facts & Events tab */ 1698#personal_facts_content .fact_NOTE, 1699#personal_facts_content .fact_SOUR, 1700#family-table .fact_NOTE, 1701#family-table .fact_SOUR { 1702 margin: 5px 3px 5px 0; 1703 clear: both; 1704} 1705 1706.media-display-image { 1707 float: left; 1708} 1709 1710.media-display-title { 1711 float: left; 1712 font-style: italic; 1713 margin: 10px; 1714} 1715 1716/* === jQuery.datatable styling general over-rides === */ 1717.odd { 1718 background-color: LightGrey; 1719} 1720 1721.even { 1722 background-color: #fff; 1723} 1724 1725.css_right { 1726 float: left; 1727} 1728 1729.fg-button { 1730 padding: 2px 6px; 1731} 1732 1733.fg-toolbar { 1734 background: #eee; 1735 border-color: #aaa; 1736} 1737 1738.dataTables_paginate { 1739 float: left; 1740 margin-bottom: 3px; 1741} 1742 1743.dataTables_processing { 1744 float: left; 1745} 1746 1747.dataTables_filter { 1748 float: right; 1749 font-weight: normal; 1750} 1751 1752.dataTables_info { 1753 float: left; 1754 font-weight: normal; 1755 padding: 4px; 1756} 1757 1758.recent_changes_block .dataTables_info, 1759.upcoming_events_block .dataTables_info, 1760.todays_events_block .dataTables_info, 1761.todo_block .dataTables_info, 1762.yahrzeit_block .dataTables_info { 1763 padding: 0; 1764} 1765 1766.upcoming_events_block .dataTables_info, 1767.todays_events_block .dataTables_info { 1768 padding: 2px 0 0; 1769} 1770 1771.upcoming_events_block button, 1772.todays_events_block button { 1773 margin: 0 20px; 1774} 1775 1776.dataTables_length { 1777 float: right; 1778 font-weight: normal; 1779} 1780 1781.dataTables_length select, 1782.dataTables_filter input { 1783 padding: 1px; 1784} 1785 1786.dt-clear { 1787 clear: both; 1788} 1789 1790#loading { 1791 text-align: center; 1792} 1793 1794.DataTables_sort_wrapper { 1795 position: relative; 1796 margin: 0 20px; 1797} 1798 1799.DataTables_sort_wrapper span { 1800 left: 0; 1801 margin-left: -20px; 1802 margin-top: -8px; 1803 position: absolute; 1804 top: 50%; 1805} 1806 1807.dataTables_wrapper { 1808 margin-bottom: 10px; 1809} 1810 1811/* ======= Sidebar setup ===== */ 1812#main { 1813 min-width: 600px; 1814 width: 100%; 1815 display: table; 1816 table-layout: fixed; 1817} 1818 1819#indi_left { 1820 display: table-cell; 1821} 1822 1823#tabs { 1824 padding-bottom: 0; 1825 margin-bottom: 0; 1826 width: 98%; 1827 overflow: visible; 1828} 1829 1830/* sidebar */ 1831#sidebar { 1832 width: 20%; 1833 display: table-cell; 1834 vertical-align: top; 1835} 1836 1837/* Sidebar - Family navigator */ 1838.wt-family-navigator-dropdown { 1839 background: #eee; 1840} 1841 1842.wt-family-navigator-dropdown-heading { 1843 font-weight: bold; 1844 font-size: inherit; 1845 color: inherit; 1846} 1847 1848/* Sidebar - Descendants */ 1849#sb_content_descendancy { 1850 margin-top: 5px; 1851} 1852 1853#sb_desc_content { 1854 margin-left: 3px; 1855 font-size: 0.8em; 1856} 1857 1858#sb_desc_content ul { 1859 padding: 0; 1860 margin: 0; 1861} 1862 1863.sb_desc_indi_li { 1864 list-style-type: none; 1865} 1866 1867.desc_tree_div { 1868 display: none; 1869} 1870 1871.desc_tree_div ul { 1872 padding: 0; 1873 margin-left: 10px; 1874 margin-top: 0; 1875 margin-right: 0; 1876} 1877 1878/* Individuals and Families */ 1879#sidebar-content-individuals, 1880#sidebar-content-families { 1881 margin-top: 5px; 1882} 1883 1884.sb_indi_surname_li, 1885.sb_fam_surname_li { 1886 list-style-image: url(fab/images/plus.png); 1887} 1888 1889.name_tree_div ul { 1890 padding: 0; 1891 margin: 0; 1892} 1893 1894.name_tree_div li { 1895 list-style: none; 1896 margin: 0; 1897 padding: 0; 1898} 1899 1900/* Clippings */ 1901#sb_clippings_content ul { 1902 padding: 0; 1903 margin: 0; 1904} 1905 1906#sb_clippings_content li { 1907 list-style: none; 1908 margin: 0; 1909 padding: 0; 1910 white-space: nowrap; 1911} 1912 1913/* Extra info */ 1914#sb_content_extra_info { 1915 font-size: 80%; 1916 font-weight: bold; 1917 margin-top: 1px; 1918 overflow: hidden; 1919 padding: 5px; 1920} 1921 1922#sb_content_extra_info .editfacts { 1923 float: right; 1924 margin-top: -10px; 1925} 1926 1927#sb_content_extra_info a { 1928 display: block; 1929} 1930 1931#sb_content_extra_info span { 1932 font-weight: normal; 1933} 1934 1935#sb_content_extra_info span a { 1936 display: inline; 1937} 1938 1939#sb_content_extra_info #hitcounter { 1940 font-weight: bold; 1941 padding-top: 5px; 1942} 1943 1944/* http://www.jacklmoore.com/colorbox */ 1945#colorbox, 1946#cboxOverlay, 1947#cboxWrapper { 1948 position: absolute; 1949 top: 0; 1950 left: 0; 1951 z-index: 9999; 1952 overflow: hidden; 1953} 1954 1955#cboxWrapper { 1956 max-width: none; 1957} 1958 1959#cboxOverlay { 1960 position: fixed; 1961 width: 100%; 1962 height: 100%; 1963 background: #fff; 1964} 1965 1966#cboxContent { 1967 background: #fff; 1968 overflow: hidden; 1969 position: relative; 1970 padding: 0.5rem; 1971 border: 0.25rem solid #ccc; 1972} 1973 1974#cboxLoadingOverlay, 1975#cboxLoadingGraphic { 1976 position: absolute; 1977 top: 0; 1978 left: 0; 1979 width: 100%; 1980 height: 100%; 1981} 1982 1983.cboxPhoto { 1984 float: left; 1985 margin: auto; 1986 border: 0; 1987 display: block; 1988 max-width: none; 1989} 1990 1991#colorbox, 1992#cboxContent, 1993#cboxLoadedContent { 1994 box-sizing: content-box; 1995} 1996 1997#cboxError { 1998 padding: 50px; 1999 border: 1px solid #ccc; 2000} 2001 2002#cboxLoadedContent { 2003 margin-bottom: 28px; 2004} 2005 2006#cboxTitle { 2007 background: #fff; 2008 position: absolute; 2009 bottom: 0.25rem; 2010 left: 0; 2011 margin: 0 3rem; 2012 text-align: center; 2013} 2014 2015#cboxLoadingGraphic { 2016 background: url(images/loading-32x32.gif) no-repeat center center; 2017} 2018 2019#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { 2020 background: none; 2021 border: 0; 2022 cursor: pointer; 2023 font-family: "Font Awesome\ 5 Free", sans-serif; 2024 font-weight: 900; 2025 overflow: visible; 2026 padding: 0; 2027 position: absolute; 2028} 2029 2030#cboxSlideshow { 2031 bottom: 0.25rem; 2032 right: 0.25rem; 2033} 2034 2035#cboxPrevious { 2036 bottom: 0.25rem; 2037 left: 0.25rem; 2038} 2039 2040#cboxNext { 2041 bottom: 0.25rem; 2042 left: 1.5rem; 2043} 2044 2045#cboxClose { 2046 top: 0.25rem; 2047 right: 0.25rem; 2048} 2049 2050/* Stories module */ 2051.story_title { 2052 padding-top: 12px; 2053 font-size: 13px; 2054 height: 32px; 2055 font-weight: bold; 2056} 2057 2058.story_body { 2059 padding: 20px; 2060 white-space: normal; 2061} 2062 2063.story_edit { 2064 padding: 12px; 2065} 2066 2067/* ====== Charts Styles ======== */ 2068#people label { 2069 display:block; 2070} 2071 2072/* Ancestry chart */ 2073.wt-ancestors-chart-list { 2074 background: transparent url(images/vline.png) left top repeat-y; 2075 margin: 0 0 0 15px; 2076 padding: 0; 2077 display: block; 2078} 2079 2080.wt-ancestors-chart-list-item { 2081 margin: 5px 0; 2082} 2083 2084.chart_common li { 2085 list-style: outside none none; 2086} 2087 2088.generations { 2089 background: transparent url(images/vline.png) repeat-y scroll left top; 2090 display: block; 2091 margin: 0 0 0 15px; 2092 padding: 0; 2093} 2094 2095.chart_common table { 2096 padding: 0; 2097 border-spacing: 0; 2098 border-collapse: collapse; 2099 margin: 5px 0; 2100} 2101 2102.chart_common td { 2103 border: 0; 2104 padding: 0; 2105} 2106 2107.chart_common span.details1 div[class^=fact_] { 2108 display: inline-block; 2109} 2110 2111.chart_common span.details1 .date { 2112 color: inherit; 2113} 2114 2115/*-- Family book --*/ 2116#familybook_chart { 2117 margin-left: 10px; 2118} 2119 2120#familybook_chart table { 2121 border-collapse: collapse; 2122 empty-cells: show; 2123} 2124 2125#familybook_chart td { 2126 margin: 0; 2127 padding: 0; 2128} 2129 2130#familybook_chart h2 { 2131 text-align: center; 2132} 2133 2134#familybook_chart .line3, 2135#familybook_chart .pvline, 2136#familybook_chart .spacer { 2137 width: 3px; 2138} 2139 2140#familybook_chart .line4 { 2141 width: 7px; 2142 vertical-align: middle; 2143} 2144 2145[ID^="vline"] { 2146 width: 3px; 2147} 2148 2149#familybook_chart h3 { 2150 color: #006; 2151 font-size: 16px; 2152 text-align: center; 2153} 2154 2155/*-- Fan chart ---- */ 2156.fan_chart_menu { 2157 position: absolute; 2158 display: none; 2159 z-index: 100; 2160} 2161 2162#fan_chart ul { 2163 list-style-type: none; 2164 margin: 0; 2165} 2166 2167/* Lifespans chart */ 2168.wt-lifespans-subtitle { 2169 text-align: center; 2170} 2171 2172.wt-lifespans-scale { 2173 white-space: nowrap; 2174} 2175 2176.wt-lifespans-decade { 2177 width: 70px; 2178 height: 60px; 2179 display: inline-block; 2180 background-image: url(images/lifespan-decade.png); 2181 background-position-y: bottom; 2182 background-repeat: no-repeat; 2183 background-size: 70px 37px; 2184} 2185 2186.wt-lifespans-individuals { 2187 background: #fafafa; 2188} 2189 2190.wt-lifespans-individual { 2191 2192} 2193 2194.wt-lifespans-summary { 2195 background: #ffffff; 2196 border: thin solid #000; 2197 z-index: 1; 2198} 2199 2200.wt-lifespans-summary-link { 2201 font-weight: bold; 2202} 2203 2204/*-- Pedigree ---- */ 2205#pedigree_chart { 2206 position: relative; 2207 margin: 20px auto; 2208} 2209 2210#pedigree_canvas { 2211 color: #aaa; 2212 z-index: -1000; 2213} 2214 2215#pedigree-page .shadow { 2216 position: absolute; 2217 white-space: nowrap; 2218} 2219 2220#pedigree-page .layout0 .shadow > div, 2221#pedigree-page .layout1 .shadow > div { 2222 display: inline-block; 2223 vertical-align: middle; 2224} 2225 2226#pedigree-page .spacer { 2227 background-image: url(images/spacer.png); 2228 height: 20px; 2229 width: 1px; 2230} 2231 2232#childarrow, 2233.ancestorarrow { 2234 text-align: center; 2235} 2236 2237#pedigree-page #childarrow { 2238 position: relative; 2239} 2240 2241#pedigree-page #childbox { 2242 border: 1px solid; 2243 background-color: #fff; 2244} 2245 2246#pedigree-page table.list_table { 2247 margin: 0 auto; 2248 width: 500px; 2249} 2250 2251.pedigree_chart_table { 2252 border: 0; 2253 border-collapse: collapse; 2254 padding: 0; 2255 width: 100%; 2256} 2257 2258/*-- timeline --*/ 2259#timeline_chart { 2260 position: relative; 2261 top: 0; 2262 left: 0; 2263} 2264 2265#field_table { 2266 width: 40%; 2267 min-width: 600px; 2268} 2269 2270/*-- Relationship ---- */ 2271 2272.wt-relationship-chart .hline-text, 2273.wt-relationship-chart .vline-text { 2274 font-size: 12px; 2275} 2276 2277/* 2278 * Any element that is loaded dynamically has the class wt-ajax-load. 2279 * We can provide a "loading" placeholder for empty elements with this class. 2280 */ 2281.wt-ajax-load:empty { 2282 height: 32px; 2283 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 2284} 2285 2286/* Default icons are provided by FontAwesome. */ 2287.wt-icon-anniversary { 2288 content: url(images/anniversary.png); 2289} 2290 2291.wt-icon-reorder { 2292 content: url(images/reorder.png); 2293} 2294 2295.wt-icon-sex-f::before { 2296 color: var(--sex-f-fg); 2297} 2298 2299.wt-icon-sex-m::before { 2300 color: var(--sex-m-fg); 2301} 2302 2303.wt-icon-sex-u::before { 2304 color: var(--sex-u-fg); 2305} 2306 2307.wt-icon-sex-x::before { 2308 color: var(--sex-u-fg); 2309} 2310 2311.wt-icon-warning { 2312} 2313 2314/* 2315 * .wt-icon-arrow-down 2316 * .wt-icon-arrow-end (right on LTR, left on RTL) 2317 * .wt-icon-arrow-start (left on LTR, right on RTL) 2318 * .wt-icon-arrow-up 2319 * .wt-icon-bing-maps 2320 * .wt-icon-calendar 2321 * .wt-icon-copy 2322 * .wt-icon-delete 2323 * .wt-icon-edit 2324 * .wt-icon-email 2325 * .wt-icon-family 2326 * .wt-icon-help 2327 * .wt-icon-individual 2328 * .wt-icon-google-maps 2329 * .wt-icon-keyboard 2330 * .wt-icon-media 2331 * .wt-icon-note 2332 * .wt-icon-openstreetmap 2333 * .wt-icon-preferences 2334 * .wt-icon-repository 2335 * .wt-icon-source 2336 * .wt-icon-submitter 2337 */ 2338 2339[class^="icon-"], 2340[class*=" icon-"] { 2341 display: inline-block; 2342 vertical-align: middle; 2343 background-repeat: no-repeat; 2344 background-size: cover; 2345} 2346 2347.icon-add { 2348 width: 14px; 2349 height: 15px; 2350 background-image: url(images/add.png); 2351} 2352 2353.icon-cfamily { 2354 width: 24px; 2355 height: 24px; 2356 background-image: url(fab/images/cfamily.png); 2357} 2358 2359.icon-childless { 2360 width: 25px; 2361 height: 25px; 2362 background-image: url(fab/images/childless.png); 2363} 2364 2365.icon-children { 2366 width: 16px; 2367 height: 16px; 2368 background-image: url(fab/images/children.png); 2369} 2370 2371.icon-clippings { 2372 width: 24px; 2373 height: 24px; 2374 background-image: url(fab/images/clippings.png); 2375} 2376 2377.icon-edit_indi { 2378 width: 25px; 2379 height: 25px; 2380 background-image: url(fab/images/edit_indi.png); 2381} 2382 2383.icon-fam-list { 2384 width: 24px; 2385 height: 24px; 2386 background-image: url(fab/images/sfamily.png); 2387} 2388 2389.icon-indi-list { 2390 width: 50px; 2391 height: 50px; 2392 background-image: url(fab/images/indis.png); 2393} 2394 2395.icon-loading-small { 2396 width: 16px; 2397 height: 16px; 2398 background-image: url(fab/images/indicator.gif); 2399} 2400 2401.icon-media { 2402 width: 24px; 2403 height: 24px; 2404 background-image: url(fab/images/media.png); 2405} 2406 2407.icon-media-list { 2408 width: 24px; 2409 height: 24px; 2410 background-image: url(fab/images/media.png); 2411} 2412 2413.icon-media-next { 2414 width: 20px; 2415 height: 20px; 2416 background-image: url(fab/images/rdarrow.png); 2417} 2418 2419.icon-media-play { 2420 width: 20px; 2421 height: 20px; 2422 background-image: url(fab/images/rarrow.png); 2423} 2424 2425.icon-media-stop { 2426 width: 20px; 2427 height: 20px; 2428 background-image: url(fab/images/stop.png); 2429} 2430 2431.icon-minus { 2432 width: 11px; 2433 height: 11px; 2434 background-image: url(fab/images/minus.png); 2435} 2436 2437.icon-mypage { 2438 width: 25px; 2439 height: 25px; 2440 background-image: url(fab/images/mypage.png); 2441} 2442 2443.icon-note { 2444 width: 16px; 2445 height: 16px; 2446 background-image: url(fab/icons/note.png); 2447} 2448 2449.icon-pin-in { 2450 width: 16px; 2451 height: 16px; 2452 background-image: url(fab/images/pin-in.png); 2453} 2454 2455.icon-pin-out { 2456 width: 16px; 2457 height: 16px; 2458 background-image: url(fab/images/pin-out.png); 2459} 2460 2461.icon-plus { 2462 width: 11px; 2463 height: 11px; 2464 background-image: url(fab/images/plus.png); 2465} 2466 2467.icon-remove { 2468 width: 14px; 2469 height: 15px; 2470 background-image: url(fab/images/remove.png); 2471} 2472 2473.icon-resn-confidential { 2474 width: 16px; 2475 height: 16px; 2476 background-image: url(fab/images/resn_confidential.png); 2477} 2478 2479.icon-resn-locked { 2480 width: 16px; 2481 height: 16px; 2482 background-image: url(fab/images/resn_locked.png); 2483} 2484 2485.icon-resn-none { 2486 width: 16px; 2487 height: 16px; 2488 background-image: url(fab/images/resn_none.png); 2489} 2490 2491.icon-resn-privacy { 2492 width: 16px; 2493 height: 16px; 2494 background-image: url(fab/images/resn_privacy.png); 2495} 2496 2497.icon-rings { 2498 width: 9px; 2499 height: 9px; 2500 background-image: url(fab/images/rings.png); 2501} 2502 2503.icon-selected { 2504 width: 12px; 2505 height: 12px; 2506 background-image: url(fab/images/selected.png); 2507} 2508 2509.icon-slide_close { 2510 width: 22px; 2511 height: 20px; 2512 background-image: url(fab/images/close.png); 2513} 2514 2515.icon-slide_open { 2516 width: 20px; 2517 height: 22px; 2518 background-image: url(fab/images/open.png); 2519} 2520 2521.icon-source { 2522 width: 24px; 2523 height: 24px; 2524 background-image: url(fab/images/source.png); 2525} 2526 2527/* Silhouettes on charts */ 2528.icon-silhouette-F { 2529 width: 37px; 2530 height: 45px; 2531 background-image: url(fab/images/silhouette_female_small.png); 2532} 2533 2534.icon-silhouette-M { 2535 width: 37px; 2536 height: 45px; 2537 background-image: url(fab/images/silhouette_male_small.png); 2538} 2539 2540.icon-silhouette-U { 2541 width: 37px; 2542 height: 45px; 2543 background-image: url(fab/images/silhouette_unknown_small.png); 2544} 2545 2546.menu-language li { 2547 text-align: left; /* The language menu is always LTR, even on RTL pages */ 2548} 2549 2550.menu-theme li { 2551 text-align: left; /* The theme menu is always LTR, even on RTL pages */ 2552} 2553 2554.icon-indis { 2555 width: 24px; 2556 height: 24px; 2557 background-image: url(fab/images/indis.png); 2558} 2559 2560.icon-patriarch { 2561 width: 24px; 2562 height: 24px; 2563 background-image: url(fab/images/patriarch.png); 2564} 2565 2566.icon-pedigree { 2567 width: 24px; 2568 height: 24px; 2569 background-image: url(fab/images/pedigree.png); 2570} 2571 2572.icon-place { 2573 width: 24px; 2574 height: 24px; 2575 background-image: url(fab/images/place.png); 2576} 2577 2578.icon-repo-list { 2579 width: 30px; 2580 height: 30px; 2581 background-image: url(fab/images/repository.png); 2582} 2583 2584.icon-repository { 2585 width: 30px; 2586 height: 30px; 2587 background-image: url(fab/images/repository.png); 2588} 2589 2590.icon-search { 2591 width: 24px; 2592 height: 24px; 2593 background-image: url(fab/images/search.png); 2594} 2595 2596.icon-sfamily { 2597 width: 24px; 2598 height: 24px; 2599 background-image: url(fab/images/sfamily.png); 2600} 2601 2602.icon-source-list { 2603 width: 24px; 2604 height: 24px; 2605 background-image: url(fab/images/source.png); 2606} 2607 2608.icon-user_add { 2609 width: 24px; 2610 height: 24px; 2611 background-image: url(fab/images/user_add.png); 2612} 2613 2614/* 2615 * Icons for file types 2616 * 2617 * Icons made by Zlatko Najdenovski 2618 * https://www.flaticon.com/packs/file-formats-3" 2619 * Creative Commons BY 3.0 2620 */ 2621.wt-mime { 2622 background: url(images/mime.svg); 2623 display: inline-block; 2624 width: 48px; 2625 height: 48px; 2626} 2627 2628.wt-mime-application-pdf { 2629 background: url(images/mime-application-pdf.svg); 2630} 2631 2632.wt-mime-audio { 2633 background: url(images/mime-audio.svg); 2634} 2635 2636.wt-mime-text { 2637 background: url(images/mime-text.svg); 2638} 2639 2640.wt-mime-text-html { 2641 background: url(images/mime-text-html.svg); 2642} 2643 2644.wt-mime-video { 2645 background: url(images/mime-video.svg); 2646} 2647 2648/* 2649 * On-screen keyboard, for entering characters that are not on the keyboard 2650 */ 2651.wt-osk { 2652 position: fixed; 2653 z-index: 1000; 2654 top: 1rem; 2655 display: none; 2656} 2657.wt-osk-keys { 2658 background: #eee; 2659 padding: 0.25rem; 2660 font-size: larger; 2661} 2662.wt-osk-group { 2663 display: inline-block; 2664 margin: 0.25rem; 2665 padding: 0.25rem 0; 2666} 2667.wt-osk-key { 2668 background: #ddd; 2669 border-radius: .25rem; 2670 padding: 0.25rem; 2671 cursor: pointer; 2672} 2673.wt-osk-key-shift { 2674 color: #aaa; 2675 font-size: smaller; 2676} 2677.wt-osk-keys.shifted .wt-osk-key { 2678 color: #aaa; 2679} 2680.wt-osk-keys.shifted .wt-osk-key-shift { 2681 color: #555; 2682} 2683 2684/* Census assistant */ 2685.wt-census-assistant-form-control:focus { 2686 min-width: 12rem; 2687} 2688 2689/* 2690 * Drag and drop sortable lists 2691 */ 2692.wt-sortable-list { 2693} 2694 2695.wt-sortable-item { 2696 cursor: move; 2697} 2698 2699/* Some blocks show a reduced version on the right-hand side. */ 2700.wt-side-blocks .wt-side-block-optional { 2701 display: none !important; 2702} 2703 2704/* my page chart enhancements */ 2705.wt-block-content-charts { 2706 flex-flow: column-reverse; 2707 overflow: auto; 2708} 2709 2710.wt-block-content-todays-events-block { 2711 padding: .25rem; 2712} 2713 2714/* Some charts are wider than the page. */ 2715.wt-chart { 2716 overflow-x: auto; 2717 overflow-y: hidden; 2718} 2719 2720/* Fit thumbnail into parent on charts */ 2721.select2-selection.select2-selection--single { 2722 min-height: 36px; 2723 height: auto; 2724 padding: 2px 0; 2725} 2726 2727.select2-container .select2-selection--single .select2-selection__rendered { 2728 padding-left: 2px; 2729} 2730.select2-selection--single .NAME { 2731 padding-left: 4px; 2732} 2733 2734/* 2735 * These selectors control how the short horizontal lines are positioned in the Charts 2736 * Optimized for Win10 and FF, Chrome and Edge browsers 2737 * Ancestors 2738 * Descendants 2739 * amily book 2740 * Hourglass chart 2741 * 2742 */ 2743 2744/* Ascentors */ 2745.wt-ancestors-chart .linea1 {margin-bottom: 4px;} 2746.wt-ancestors-chart .linea2 {margin-bottom: 7px;} 2747.wt-ancestors-chart .linea3 {margin-bottom: 4px;} 2748.wt-ancestors-chart .linea4 {margin-bottom: 7px;} 2749.wt-ancestors-chart .linea5 {vertical-align: top;} 2750 2751/* Descendants */ 2752.wt-descendants-chart .lined1 {margin-bottom: 4px;} 2753.wt-descendants-chart .lined2 {margin-bottom: 7px;} 2754.wt-descendants-chart .lined3 {margin-bottom: 4px;} 2755.wt-descendants-chart .lined4 {margin-bottom: 7px;} 2756.wt-descendants-chart .linea5 {vertical-align: top;} 2757 2758/* Family book */ 2759.linef1 {margin-bottom: 3px;} 2760.linef2 {margin-bottom: 3px;} 2761.linef3 {margin-bottom: 7px;} 2762 2763/* Hourglass */ 2764.lineh1 {margin-bottom: 4px;} 2765.lineh2 {margin-bottom: 4px;} 2766.lineh3 {margin-bottom: 7px;} 2767 2768/* 2769 * Ancestors chart 2770 * 2771 * wt-chart, wt-ancestors-chart 2772 * +---wt-ancestors-chart-list 2773 * +---wt-ancestors-chart-list-item 2774 */ 2775.wt-ancestors-chart-list { 2776} 2777 2778.wt-ancestors-chart .family-break { 2779 page-break-before: always; 2780} 2781 2782/* 2783 * Compact chart 2784 * 2785 * wt-chart, wt-compact-chart 2786 */ 2787 2788.wt-ancestors-chart-list-item { 2789 list-style: none outside none; 2790} 2791 2792.wt-ancestors-chart .person_box_template { 2793 line-height: 1.0; 2794} 2795 2796/* 2797 * Descendants chart 2798 * 2799 * wt-chart, wt-descendants-chart 2800 * +---wt-descendants-chart-list 2801 * +---wt-descendants-chart-list-item 2802 */ 2803.wt-descendants-chart-list { 2804} 2805 2806.wt-descendants-chart-list-item { 2807 list-style: none outside none; 2808} 2809 2810#descendancy_chart .person_box_template, .wt-descendants-chart .person_box_template { 2811 line-height: 1.0; 2812} 2813 2814.wt-descendants-chart .family-break { 2815 page-break-before: always; 2816} 2817 2818/* 2819 * Family book chart 2820 * 2821 * wt-chart, wt-family-book-chart 2822 */ 2823.wt-family-book-chart .person_box_template { 2824 line-height: 1.0; 2825} 2826 2827.wt-family-book-chart hr { 2828 page-break-after: always; 2829} 2830/* 2831 * Hourglass chart 2832 * 2833 * wt-chart, wt-hourglass-chart 2834 */ 2835.hourglassChart .person_box_template { 2836 line-height: 1.0; 2837} 2838 2839/* 2840 * Pedigree chart 2841 * 2842 * wt-chart, wt-pedigree-chart 2843 */ 2844 2845#pedigree_chart { 2846 position: relative; 2847 margin: 20px auto; 2848} 2849 2850#pedigree_canvas { 2851 z-index: -1000; 2852} 2853 2854.wt-pedigree-chart .person_box_template { 2855 line-height: 1.0; 2856} 2857 2858#childbox-pedigree { 2859 border: 1px solid; 2860 background-color: #fff; 2861} 2862 2863#pedigree-page #childbox-pedigree { 2864 border: 1px solid; 2865 background-color: #fff; 2866} 2867 2868#childbox-pedigree { 2869 padding: 5px; 2870 position: absolute; 2871 display: none; 2872 text-align: start; 2873 white-space: nowrap; 2874 left: auto; 2875 z-index: 9999; 2876} 2877 2878.wt-pedigree-chart, .wt-hourglass-chart { 2879 overflow-y: auto; 2880} 2881 2882.wt-pedigree-chart .spacer { 2883 background-image: url(images/spacer.png); 2884 height: 20px; 2885 width: 1px; 2886} 2887 2888#pedigree-page .shadow { 2889 box-shadow: 0 0 0!important; /* override vendor css shadow */ 2890} 2891 2892#childarrow, 2893.ancestorarrow { 2894 text-align: center; 2895 display: inline-block; 2896 vertical-align: middle; 2897} 2898 2899.layout3 #childbox-pedigree { 2900 top: auto; 2901} 2902 2903#childbox-pedigree a.name1 { 2904 display: block; 2905 margin-left: 5px; 2906} 2907 2908/* 2909 * Relationships chart 2910 * 2911 * wt-chart, wt-relationships-chart 2912 */ 2913.wt-relationship-chart .person_box_template { 2914 line-height: 1.0; 2915} 2916.vline-text, .hline-text { font-size: 0.7rem; 2917} 2918 2919/* 2920 * Place hierarchy 2921 * 2922 * wt-place-hierarchy-page 2923 */ 2924 2925#place-hierarchy ul { 2926 list-style-type: none; 2927} 2928 2929.d-table-cell { 2930 padding-right: 5px; 2931} 2932 2933/* 2934 * Search 2935 * 2936 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page 2937 */ 2938 2939/* Some menus (e.g. languages) can be longer than a page */ 2940.dropdown-menu { 2941 max-height: 30rem; 2942 overflow-x: hidden; 2943} 2944 2945/* Clipping cart */ 2946.clipping-cart h2 { 2947 margin: 20px; 2948 text-align: center; 2949} 2950.clipping-cart .wt-page-options { 2951 max-width: 25rem; 2952} 2953 2954.clipping-cart .topbottombar, .clipping-cart .optionbox, .add-to .topbottombar { 2955 font-size: 1rem; 2956} 2957 2958.clipping-cart .add-to { 2959 text-align: left; 2960} 2961 2962/* Forms */ 2963.col-form-label { 2964 font-weight: bold; 2965} 2966 2967/* Popups */ 2968.popup .nav-link { 2969 display: inline; 2970 vertical-align: top; 2971 padding: 5px; 2972} 2973 2974