1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2019 webtrees development team 4 * This program is free software: you can redistribute it and/or modify 5 * it under the terms of the GNU General Public License as published by 6 * the Free Software Foundation, either version 3 of the License, or 7 * (at your option) any later version. 8 * This program is distributed in the hope that it will be useful, 9 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * GNU General Public License for more details. 12 * You should have received a copy of the GNU General Public License 13 * along with this program. If not, see <http://www.gnu.org/licenses/>. 14 */ 15 16/* The minimal theme */ 17@import "_base.css"; 18@import "_block-charts.css"; 19@import "_charts.css"; 20@import "_lists.css"; 21@import "_mime-type-icons.css"; 22@import "_on-screen-keyboard.css"; 23@import "_tab-relatives.css"; 24 25/* Colors for chart boxes, etc. */ 26:root { 27 --sex-f-fg: #888888; 28 --sex-m-fg: #888888; 29 --sex-u-fg: #888888; 30 --sex-f-bg: #ffffff; 31 --sex-m-bg: #ffffff; 32 --sex-u-bg: #ffffff; 33 --chart-line: solid gray thin; 34 --chart-line-radius: 1rem; 35} 36 37/* Override Bootstrap formatting */ 38.btn-link { 39 padding-left: 0.25rem; 40 padding-right: 0.25rem; 41} 42 43.table-given-name { 44 overflow-x: hidden; 45} 46 47.container-fluid { 48 padding-left: 5px; 49 padding-right: 5px; 50} 51 52table { 53 border-collapse: separate; 54} 55 56/* 57 * Pages have the following high-level structure: 58 * 59 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 60 * +---wt-header-wrapper 61 * | +---wt-header-container 62 * | +---wt-header-content 63 * | +---wt-accessibility-links 64 * | +---wt-site-logo 65 * | +---wt-site-title 66 * | +---wt-header-search 67 * | | +---wt-header-search-form 68 * | | +---wt-header-search-field 69 * | | +---wt-header-search-button 70 * | +---wt-secondary-navigation 71 * | | +---wt-user-menu 72 * | +---wt-primary-navigation 73 * | +---wt-genealogy-menu 74 * +---wt-main-wrapper 75 * | +---wt-main-container 76 * | +---wt-main-content 77 * | +---wt-messages 78 * | +---wt-page-title 79 * | +---wt-page-options wt-page-options-xxxxx 80 * | +---wt-page-content 81 * +---wt-footers 82 * +---wt-footer wt-footer-contact 83 * +---wt-footer wt-footer-cookies 84 * +---wt-footer wt-footer-page-views 85 * +---wt-footer wt-footer-powered-by 86 */ 87 88.wt-global { 89 /* Avoid extremes of black and white. It is better for users with dyslexia. */ 90 color: #0a0a0a; 91 background-color: #f9f9f9; 92} 93 94.wt-header-wrapper { 95} 96 97.wt-header-container { 98 margin-top: 1rem; 99} 100 101.wt-header-content { 102} 103 104.wt-accessibility-links { 105} 106 107.wt-site-logo { 108 display: none; 109} 110 111.wt-site-title { 112 order: 1; 113 flex: 1 1 0; 114 font-size: 1.75rem; 115} 116 117.wt-header-search { 118 order: 3; 119 flex: 0 0 15rem; 120} 121 122.wt-header-search-form { 123} 124 125.wt-header-search-field { 126} 127 128.wt-header-search-button { 129} 130 131.wt-secondary-navigation { 132 order: 2; 133 flex: 0 0 0; 134 white-space: nowrap; 135} 136 137.wt-user-menu { 138 flex-wrap: nowrap; 139} 140 141.wt-user-menu .nav-link { 142 padding: 0.5rem; 143} 144 145.wt-primary-navigation { 146 order: 4; 147 /* Extend to full page width */ 148 flex: 0 1 100vw; 149 max-width: 100vw; 150 /* Recalculate margins for content */ 151 margin: 0 calc(50% - 50vw); 152 padding: 0 calc(50vw - 50%); 153 border-bottom: 2px solid #aaa; 154} 155 156.wt-genealogy-menu { 157 justify-content: center; 158} 159 160.wt-genealogy-menu .nav-link { 161 padding: 0.5rem; 162} 163 164.wt-main-container { 165 /* Space between the header/footer and the main content. */ 166 padding-top: 1rem; 167 padding-bottom: 1rem; 168} 169 170.wt-main { 171} 172 173.wt-messages { 174} 175 176.wt-page-title { 177 text-align: center; 178} 179 180.wt-page-content { 181 margin-top: 1rem; 182} 183 184.wt-footers { 185} 186 187.wt-footer { 188} 189 190.wt-footer-contact { 191} 192 193.wt-footer-cookies { 194 background: #aaa; 195 color: #fff; 196 transition: height 0.5s; 197} 198 199.wt-footer-page-views { 200} 201 202.wt-footer-powered-by { 203} 204 205.wt-footer-powered-by-webtrees { 206} 207 208/* 209 * The tree/user home pages 210 * 211 * wt-home-page / wt-user-page 212 * +---wt-main-blocks 213 * | +---wt-block, wt-block-AAA 214 * | +---wt-block, wt-block-BBB 215 * | +---wt-block, wt-block-CCC 216 * +---wt-side-blocks 217 * +---wt-block, wt-block-XXX 218 * +---wt-block, wt-block-YYY 219 * +---wt-block, wt-block-ZZZ 220 * 221 * Each block as the structure 222 * wt-block, wt-block-XXX 223 * +---wt-block-header, wt-block-header-XXX 224 * +---wt-block-content, wt-block-content-XXX 225 */ 226 227.wt-block { 228 border: solid #000 1px; 229} 230 231.wt-block-header { 232 background-color: #fff; 233} 234 235.wt-block-content { 236} 237 238.wt-block-content .list_table { 239 border-spacing: 1px; 240 border: solid #000 1px; 241 border-right: 0; 242} 243 244.wt-block-content .list_value, 245.wt-block-content .list_value_wrap { 246 border: 0; 247 border-top: solid #000 1px; 248 border-right: solid #000 1px; 249} 250 251/* 252 * The individual page. 253 * 254 * wt-route-individual 255 * +---wt-header-wrapper 256 */ 257 258.wt-individual-silhouette { 259 content: url(images/individual-silhouette-unknown.png); 260} 261 262.wt-individual-silhouette-f { 263 content: url(images/individual-silhouette-female.png); 264} 265 266.wt-individual-silhouette-m { 267 content: url(images/individual-silhouette-male.png); 268} 269 270/* 271 * Chart-boxes are used to build the various charts. 272 * Each type of chart will set its own size and hide/show content. 273 * 274 * wt-chart-box 275 * +--- wt-chart-box-thumbnail 276 * +--- wt-chart-box-extra 277 * +--- wt-chart-box-zoom 278 * +--- wt-chart-box-icon 279 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 280 * +--- wt-chart-box-links 281 * +--- wt-chart-box-icon 282 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 283 * +--- wt-chart-box-name 284 * +--- wt-chart-box-lifespan 285 * +--- wt-chart-box-facts 286 * +--- wt-chart-box-fact 287 */ 288.wt-chart-box, 289.wt-chart-box-menu { 290 background: var(--sex-u-bg); 291 border: dashed var(--sex-u-fg) thin; 292} 293 294.wt-chart-box { 295 height: 5rem; 296 padding: 2px; 297 line-height: 1.1; 298} 299 300.wt-chart-box-f, 301.wt-chart-box-f .wt-chart-box-dropdown { 302 background: var(--sex-f-bg); 303 border: solid var(--sex-f-fg) thin; 304} 305 306.wt-chart-box-m, 307.wt-chart-box-m .wt-chart-box-dropdown { 308 background: var(--sex-m-bg); 309 border: solid var(--sex-m-fg) thin; 310} 311 312/* ---Pending edits--- */ 313.wt-new { 314 outline: solid thin blue; 315} 316 317.wt-old { 318 outline: solid thin red; 319} 320 321.list_value, 322.list_value_wrap { 323 border: solid #000 1px; 324 vertical-align: top; 325 padding: 4px; 326} 327 328/* ---Find special characters--- */ 329 330.gedcom_favorites_block, 331.user_favorites_block { 332 overflow: visible !important; 333} 334 335.list_table { 336 margin: 0 auto; 337} 338 339#reportengine-page .report-type { 340 overflow: hidden; 341 margin: auto; 342 width: 180px; 343} 344 345#reportengine-page .report-type div { 346 float: left; 347 margin: 0 20px; 348} 349 350#reportengine-page .report-type p { 351 margin: 0; 352 text-align: center; 353} 354 355/* ======== List styles ====== */ 356.source-list, 357.note-list, 358.repo-list, 359.media-list, 360.indi-list, 361.fam-list { 362 margin: 5px auto; 363 width: 98%; 364} 365 366.recent_changes_block, 367.upcoming_events_block, 368.todays_events_block, 369.todo_block { 370 width: 98%; 371} 372 373.surname-list, 374.givn-list { 375 margin: 5px auto; 376} 377 378.source-list table, 379.note-list table, 380.repo-list table, 381.media-list table, 382.indi-list table, 383.fam-list table { 384 width: 100%; 385} 386 387.source-list td, 388.note-list td, 389.repo-list td, 390.media-list td, 391.indi-list td, 392.fam-list td, 393.recent_changes_block td, 394.upcoming_events_block td, 395.surname-list td, 396.givn-list td { 397 padding: 2px 5px; 398} 399 400.indi-list td, 401.fam-list td { 402 color: #555; 403} 404 405.surname-list td { 406 vertical-align: top; 407} 408 409.indi-list .stats, 410.fam-list .stats { 411 margin: 0 auto; 412 width: auto; 413} 414 415.source-list th, 416.note-list th, 417.repo-list th, 418.media-list th, 419.indi-list th, 420.fam-list th, 421.wt-table-changes th, 422.wt-table-events th, 423.wt-table-tasks th, 424.wt-table-yahrzeits th, 425.surname-list th, 426.givn-list th { 427 cursor: pointer; 428 font-weight: 600; 429 padding: 2px 4px; 430 white-space: nowrap; 431} 432 433.source-list th:last-child, 434.note-list th:last-child, 435.repo-list th:last-child { 436 margin: 0 -2px 1px 1px; 437 padding: 3px 0 4px; 438 width: 24px; 439} 440 441.givn-list th { 442 cursor: pointer; 443 white-space: nowrap; 444 padding: 2px; 445 text-align: center; 446} 447 448#source-details h2, 449#sourcelist-page h2, 450#note-details h2, 451#notelist-page h2, 452#repo-details h2, 453#repolist-page h2, 454#media-details h2, 455#statistics-page h2 { 456 margin-bottom: 20px; 457 text-align: center; 458} 459 460#source-tabs, 461#note-tabs, 462#repo-tabs, 463#media-tabs { 464 visibility: hidden; 465} 466 467#statistics_chart { 468 visibility: hidden; 469} 470 471#source-edit, 472#note-edit, 473#repo-edit, 474#media-edit { 475 overflow-x: auto; 476} 477 478.media-list td img { 479 display: block; 480 height: 40px; 481 width: auto; 482 margin: 3px auto; 483} 484 485.filtersH, 486.filtersF { 487 margin: 4px; 488} 489 490.filtersH img { 491 margin-bottom: 2px; 492} 493 494.list-charts { 495 text-align: center; 496} 497 498#search-result-tabs, 499#places-tabs { 500 margin: auto; 501 width: 98%; 502 visibility: hidden; 503} 504 505#search-result-tabs h3 { 506 text-align: center; 507} 508 509#searchAccordion-indi, 510#searchAccordion-fam, 511#searchAccordion-source, 512#searchAccordion-note { 513 margin: auto; 514 width: 99%; 515} 516 517#place-hierarchy h2, 518#place-hierarchy h4 { 519 text-align: center; 520} 521 522/* ======== Block styles ===== */ 523#index_main_blocks { 524 clear: none; 525 width: 60%; 526 float: left; 527} 528 529#index_small_blocks { 530 clear: none; 531 width: 40%; 532 float: right; 533} 534 535#index_full_blocks { 536 clear: none; 537 width: 100%; 538} 539 540.block { 541 background-color: #fff; 542 color: #555; 543 border: solid #ccc 1px; 544 padding: 3px; 545 vertical-align: top; 546} 547 548.blockcontent { 549 margin: 5px; 550 overflow: auto; 551} 552 553.blockcontent .list_table { 554 border-spacing: 0; 555 border: solid #555 1px; 556 border-right: 0; 557} 558 559.blockcontent .list_value, 560.blockcontent .list_value_wrap { 561 border: 0; 562 border-top: solid #555 1px; 563 border-right: solid #555 1px; 564} 565 566.blockheader { 567 font-weight: bold; 568} 569 570/* end Block styles */ 571 572#main_select, 573#available_select, 574#right_select { 575 min-width: 150px; 576} 577 578.user_welcome_block table, 579.gedcom_block_block table { 580 margin: auto; 581} 582 583.user_welcome_block td, 584.gedcom_block_block td { 585 width: 33%; 586 text-align: center; 587 vertical-align: top; 588} 589 590.user_welcome_block i, 591.gedcom_block_block i { 592 background-image: none; 593 height: 0; 594 width: 0; 595} 596 597/* === Who is online block === */ 598.logged_in_list { 599 margin: 5px 0 0; 600 padding: 0; 601 line-height: 20px; 602} 603 604/* Table of genealogical facts */ 605 606.wt-facts-table caption { 607 caption-side: top; 608} 609 610.wt-facts-table th { 611 border: 1px solid #000; 612 font-weight: normal; 613 min-width: 20%; 614} 615 616.wt-facts-table td { 617 border: solid #000 1px; 618} 619 620a { 621 color: #333; 622 text-decoration: none; 623} 624 625a:hover { 626 color: #333; 627 text-decoration: underline; 628} 629 630a:hover { 631 text-decoration: underline!important; 632} 633 634/* ==== Theme select block === */ 635.theme_form ul { 636 margin: -10px auto; 637} 638 639.theme_form li { 640 visibility: hidden; 641} 642 643.theme_form li ul li { 644 display: inline-block; 645 padding: 10px; 646 visibility: visible; 647} 648 649/* ==== FAQ table styles ===== */ 650table.faq { 651 background-color: #ddd; 652 margin: 5px 0 50px 5px; 653 width: 98%; 654} 655 656table.faq tr:nth-child(odd) td { 657 background-color: #fff; 658} 659 660div.faq_title { 661 background-color: #ddd; 662 margin: 1em 0; 663 padding: .25em; 664 font-weight: bold; 665 width: 98%; 666} 667 668div.faq_body { 669 clear: both; 670 padding: 0 1em; 671} 672 673.faq_top { 674 float: right; 675} 676 677/* === Positioning edit, copy, delete links === */ 678/* General use */ 679.editfacts { 680 clear: left; 681 padding-top: 15px; 682} 683 684/* ======== Indi header ====== */ 685#indi_header { 686 overflow: hidden; 687 margin: 0 4px 5px; 688 width: 98%; 689} 690 691#indi_header h3 { 692 color: #555; 693 font-size: 90%; 694 font-weight: bold; 695 margin: 0; 696 padding: 0 10px 0 30px; 697 text-align: left; 698 overflow: hidden; 699 position: relative; 700} 701 702#indi_header .name_one { 703 font-size: 1.5em; 704} 705 706#indi_header h3 .details1 { 707 font-size: 1.0em; 708 border: 1px solid #888; 709} 710 711#indi_header h3 .header_age { 712 padding: 5px 0 5px 5px; 713 color: #666; 714 float: right; 715 font-weight: normal; 716 font-size: 65%; 717} 718 719#indi_header h3 a { 720 display: inline; 721} 722 723#indi_header a { 724 font-weight: normal; 725} 726 727#indi_header a:hover { 728 color: #333; 729} 730 731#indi_mainimage { 732 float: right; 733} 734 735#header_accordion1 { 736 padding: 0 10px 0 0; 737 overflow: hidden; 738} 739 740#header_accordion1 .indi_name_details { 741 background: none #fff; 742 border: 0; 743 margin: 0; 744 overflow: hidden; 745 padding: 5px; 746} 747 748.indi_name_details .name1 { 749 font-weight: normal; 750 padding-top: 5px; 751 font-size: inherit; 752} 753 754#indi_header a.warning { 755 color: #f00; 756 font-size: 1em; 757} 758 759#indi_note { 760 margin: 0 0 5px; 761} 762 763.indi_table { 764 clear: left; 765} 766 767#sex { 768 float: right; 769} 770 771#dates { 772 color: #666; 773 float: right; 774} 775 776.label { 777 font-weight: bold; 778} 779 780#individual-names .wt-icon-edit, 781#individual-names .wt-icon-delete { 782 float: right; 783} 784 785#indi_note .fact_NOTE { 786 float: left; 787 margin: 0 5px 0 0; 788} 789 790#indi_note .fact_SOUR { 791 margin: 3px 0; 792} 793 794#indi_note .fact_SOUR a { 795 font-size: 100%; 796} 797 798#indi_note .fact_NOTE, 799#indi_note .fact_SOUR { 800 clear: both; 801} 802 803/* markdown formatting */ 804 805.markdown { 806 /* Tables and pre-formatted text can break the layout. */ 807 overflow-x: auto; 808} 809 810.markdown p { 811 margin: 0 0 0.5em; 812 white-space: pre-wrap; 813} 814 815.markdown table { 816 border-collapse: collapse; 817 font-size: 10px; 818 margin-bottom: 5px; 819} 820 821.markdown th { 822 font-weight: bold; 823} 824 825.markdown td, 826.markdown th { 827 border: solid thin #000; 828 padding: 3px; 829} 830 831.odometer { 832 font-family: courier, monospace; 833 font-weight: bold; 834 background: #000; 835 color: #fff; 836} 837 838/* ======== Indi tabs ======== */ 839/* Facts & Events tab */ 840.media-display-image { 841 float: left; 842} 843 844.media-display-title { 845 float: left; 846 font-style: italic; 847 margin: 10px; 848} 849 850.upcoming_events_block button, 851.todays_events_block button { 852 margin: 0 20px; 853} 854 855/* Sidebar - Family navigator */ 856 857/* Sidebar - Descendants */ 858#sb_content_descendancy { 859 margin-top: 5px; 860} 861 862#sb_desc_content { 863 margin-left: 3px; 864 font-size: 0.8em; 865} 866 867#sb_desc_content ul { 868 padding: 0; 869 margin: 0; 870} 871 872.sb_desc_indi_li { 873 list-style-type: none; 874} 875 876/* Individuals and Families */ 877#sidebar-content-individuals, 878#sidebar-content-families { 879 margin-top: 5px; 880} 881 882.sb_indi_surname_li, 883.sb_fam_surname_li { 884 list-style-image: url(minimal/images/plus.png); 885} 886 887.name_tree_div ul { 888 padding: 0; 889 margin: 0; 890} 891 892.name_tree_div li { 893 list-style: none; 894 margin: 0; 895 padding: 0; 896} 897 898/* Clippings */ 899#sb_clippings_content ul { 900 padding: 0; 901 margin: 0; 902} 903 904#sb_clippings_content li { 905 list-style: none; 906 margin: 0; 907 padding: 0; 908 white-space: nowrap; 909} 910 911/* Extra info */ 912#sb_content_extra_info { 913 font-size: 80%; 914 font-weight: bold; 915 margin-top: 1px; 916 overflow: hidden; 917 padding: 5px; 918} 919 920#sb_content_extra_info .editfacts { 921 float: right; 922 margin-top: -10px; 923} 924 925#sb_content_extra_info a { 926 display: block; 927} 928 929#sb_content_extra_info span { 930 font-weight: normal; 931} 932 933#sb_content_extra_info span a { 934 display: inline; 935} 936 937#sb_content_extra_info #hitcounter { 938 border-top: 1px solid #b2c7d7; 939 font-weight: bold; 940 padding-top: 5px; 941} 942 943/* http://www.jacklmoore.com/colorbox */ 944#colorbox, 945#cboxOverlay, 946#cboxWrapper { 947 position: absolute; 948 top: 0; 949 left: 0; 950 z-index: 9999; 951 overflow: hidden; 952} 953 954#cboxWrapper { 955 max-width: none; 956} 957 958#cboxOverlay { 959 position: fixed; 960 width: 100%; 961 height: 100%; 962 background: #fff; 963} 964 965#cboxContent { 966 background: #fff; 967 overflow: hidden; 968 position: relative; 969 padding: 0.5rem; 970 border: 0.25rem solid #ccc; 971} 972 973#cboxLoadingOverlay, 974#cboxLoadingGraphic { 975 position: absolute; 976 top: 0; 977 left: 0; 978 width: 100%; 979 height: 100%; 980} 981 982.cboxPhoto { 983 float: left; 984 margin: auto; 985 border: 0; 986 display: block; 987 max-width: none; 988} 989 990#colorbox, 991#cboxContent, 992#cboxLoadedContent { 993 box-sizing: content-box; 994} 995 996#cboxError { 997 padding: 50px; 998 border: 1px solid #ccc; 999} 1000 1001#cboxLoadedContent { 1002 margin-bottom: 28px; 1003} 1004 1005#cboxTitle { 1006 background: #fff; 1007 position: absolute; 1008 bottom: 0.25rem; 1009 left: 0; 1010 margin: 0 3rem; 1011 text-align: center; 1012} 1013 1014#cboxLoadingGraphic { 1015 background: url(images/loading-32x32.gif) no-repeat center center; 1016} 1017 1018#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { 1019 background: none; 1020 border: 0; 1021 cursor: pointer; 1022 font-family: "Font Awesome\ 5 Free", sans-serif; 1023 font-weight: 900; 1024 overflow: visible; 1025 padding: 0; 1026 position: absolute; 1027} 1028 1029#cboxSlideshow { 1030 bottom: 0.25rem; 1031 right: 0.25rem; 1032} 1033 1034#cboxPrevious { 1035 bottom: 0.25rem; 1036 left: 0.25rem; 1037} 1038 1039#cboxNext { 1040 bottom: 0.25rem; 1041 left: 1.5rem; 1042} 1043 1044#cboxClose { 1045 top: 0.25rem; 1046 right: 0.25rem; 1047} 1048 1049/* Stories module */ 1050.story_title { 1051 padding-top: 12px; 1052 font-size: 13px; 1053 height: 32px; 1054 font-weight: bold; 1055} 1056 1057.story_body { 1058 padding: 20px; 1059 white-space: normal; 1060} 1061 1062.story_edit { 1063 padding: 12px; 1064} 1065 1066/* Stories module */ 1067.story_title { 1068 padding-top: 12px; 1069 font-size: 13px; 1070 height: 32px; 1071 font-weight: bold; 1072} 1073 1074.story_body { 1075 padding: 20px; 1076 white-space: normal; 1077} 1078 1079.story_edit { 1080 padding: 12px; 1081} 1082 1083/* ====== Charts Styles ======== */ 1084 1085#people label { 1086 display: block; 1087} 1088 1089/*-- Fan chart ---- */ 1090.fan_chart_menu { 1091 background: #fff; 1092 position: absolute; 1093 display: none; 1094 z-index: 100; 1095} 1096 1097#fan_chart ul { 1098 list-style-type: none; 1099 margin: 0; 1100} 1101 1102/* Lifespans chart */ 1103.wt-lifespans-subtitle { 1104 text-align: center; 1105} 1106 1107.wt-lifespans-scale { 1108 white-space: nowrap; 1109} 1110 1111.wt-lifespans-decade { 1112 width: 70px; 1113 height: 60px; 1114 display: inline-block; 1115 background-image: url(images/lifespan-decade.png); 1116 background-position-y: bottom; 1117 background-repeat: no-repeat; 1118 background-size: 70px 37px; 1119} 1120 1121.wt-lifespans-individuals { 1122 background: #fafafa; 1123} 1124 1125.wt-lifespans-individual { 1126 1127} 1128 1129.wt-lifespans-summary { 1130 background: #ffffff; 1131 border: thin solid #000; 1132 z-index: 1; 1133} 1134 1135.wt-lifespans-summary-link { 1136 font-weight: bold; 1137} 1138 1139/*-- Pedigree ---- */ 1140.tvertline { 1141 vertical-align: bottom; 1142} 1143 1144.optionbox, .descriptionbox { 1145 border: solid #000 1px; 1146 vertical-align: top; 1147 padding: 3px; 1148} 1149 1150#childbox { 1151 padding: 5px; 1152 position: absolute; 1153 display: none; 1154 text-align: start; 1155 white-space: nowrap; 1156 top: 20px; 1157 left: 0; 1158} 1159 1160.layout3 #childbox { 1161 top: auto; 1162 bottom: 20px; 1163} 1164 1165#childbox a.name1 { 1166 display: block; 1167 margin-left: 5px; 1168} 1169 1170.person0, .person1, .person2, .person3, .person4, .person5 { 1171 border:outset #555 1px; 1172 vertical-align:top; 1173} 1174.person0{ 1175 background-color:#eee; 1176} 1177 1178.person1{ 1179 background-color:#bfbfbf; 1180} 1181 1182.person2{ 1183 background-color:#999; 1184} 1185 1186.person3{ 1187 background-color:#dfdfdf; 1188} 1189 1190.person4{ 1191 background-color:#eee; 1192} 1193 1194.person5{ 1195 background-color:#fefefe; 1196} 1197 1198/*-- timeline --*/ 1199#timeline_chart { 1200 position: relative; 1201 top: 0; 1202 left: 0; 1203} 1204 1205/* 1206 * Any element that is loaded dynamically has the class wt-ajax-load. 1207 * We can provide a "loading" placeholder for empty elements with this class. 1208 */ 1209.wt-ajax-load:empty { 1210 height: 32px; 1211 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 1212} 1213 1214/* 1215 * Default icons are provided by FontAwesome. 1216 * Some icons get mirrored on RTL pages. Typiclly arrows 1217 */ 1218[dir=rtl] .wt-flip-rtl { 1219 transform: scale(-1, 1); 1220} 1221 1222.wt-icon-anniversary { 1223} 1224 1225.wt-icon-arrow-down { 1226} 1227 1228a > .wt-icon-arrow-down:hover { 1229} 1230 1231.wt-icon-arrow-left { 1232} 1233 1234a > .wt-icon-arrow-left:hover { 1235} 1236 1237.wt-icon-arrow-right { 1238} 1239 1240a > .wt-icon-arrow-right:hover { 1241} 1242 1243.wt-icon-arrow-up { 1244} 1245 1246a > .wt-icon-arrow-up:hover { 1247} 1248 1249.wt-icon-collapse { 1250} 1251 1252.wt-icon-coordinates { 1253} 1254 1255.wt-icon-expand { 1256} 1257 1258.wt-icon-reorder { 1259} 1260 1261.wt-icon-sex-f { 1262 color: var(--sex-m-fg); 1263} 1264 1265.wt-icon-sex-m { 1266 color: var(--sex-m-fg); 1267} 1268 1269.wt-icon-sex-u { 1270 color: var(--sex-u-fg); 1271} 1272 1273.wt-icon-sex-x { 1274 color: var(--sex-u-fg); 1275} 1276 1277.wt-icon-warning { 1278} 1279 1280.wt-icon-zoom-in { 1281} 1282 1283.wt-icon-zoom-out { 1284} 1285 1286/* 1287 * .wt-icon-bing-maps 1288 * .wt-icon-calendar 1289 * .wt-icon-copy 1290 * .wt-icon-delete 1291 * .wt-icon-edit 1292 * .wt-icon-email 1293 * .wt-icon-family 1294 * .wt-icon-help 1295 * .wt-icon-individual 1296 * .wt-icon-google-maps 1297 * .wt-icon-keyboard 1298 * .wt-icon-media 1299 * .wt-icon-note 1300 * .wt-icon-openstreetmap 1301 * .wt-icon-preferences 1302 * .wt-icon-repository 1303 * .wt-icon-source 1304 * .wt-icon-submitter 1305 */ 1306[class^="icon-"], 1307[class*=" icon-"] { 1308 display: inline-block; 1309 vertical-align: middle; 1310 background-repeat: no-repeat; 1311 background-size: cover; 1312} 1313 1314.icon-add { 1315 width: 14px; 1316 height: 15px; 1317 background-image: url(images/add.png); 1318} 1319 1320.icon-cfamily { 1321} 1322 1323.icon-childless { 1324 width: 25px; 1325 height: 25px; 1326 background-image: url(minimal/images/childless.png); 1327} 1328 1329.icon-children { 1330 width: 16px; 1331 height: 16px; 1332 background-image: url(minimal/images/children.png); 1333} 1334 1335.icon-clippings { 1336 width: 22px; 1337 height: 22px; 1338 background-image: url(minimal/images/clippings.png); 1339} 1340 1341.icon-edit_indi { 1342 width: 20px; 1343 height: 20px; 1344 background-image: url(minimal/images/edit_sm.png); 1345} 1346 1347.icon-fam-list { 1348 width: 20px; 1349 height: 20px; 1350 background-image: url(minimal/icons/family.png); 1351} 1352 1353.icon-indi-list { 1354 width: 20px; 1355 height: 20px; 1356 background-image: url(minimal/images/indis.png); 1357} 1358 1359.icon-loading-small { 1360 width: 16px; 1361 height: 16px; 1362 background-image: url(minimal/images/indicator.gif); 1363} 1364 1365.icon-loading-large { 1366 width: 32px; 1367 height: 32px; 1368 background-image: url(images/loading-32x32.gif); 1369} 1370 1371.icon-media { 1372 width: 20px; 1373 height: 20px; 1374 background-image: url(minimal/images/media.png); 1375} 1376 1377.icon-media-list { 1378 width: 20px; 1379 height: 20px; 1380 background-image: url(minimal/images/media.png); 1381} 1382 1383.icon-media-next { 1384 width: 20px; 1385 height: 20px; 1386 background-image: url(minimal/images/rdarrow.png); 1387} 1388 1389.icon-media-play { 1390 width: 20px; 1391 height: 20px; 1392 background-image: url(minimal/images/rarrow.png); 1393} 1394 1395.icon-media-stop { 1396 width: 16px; 1397 height: 17px; 1398 background-image: url(minimal/images/stop.png); 1399} 1400 1401.icon-minus { 1402 width: 11px; 1403 height: 11px; 1404 background-image: url(minimal/images/minus.png); 1405} 1406 1407.icon-mypage { 1408 width: 24px; 1409 height: 24px; 1410 background-image: url(minimal/images/mypage.png); 1411} 1412 1413.icon-note { 1414 width: 20px; 1415 height: 20px; 1416 background-image: url(minimal/icons/note.png); 1417} 1418 1419.icon-plus { 1420 width: 11px; 1421 height: 11px; 1422 background-image: url(minimal/images/plus.png); 1423} 1424 1425.icon-remove { 1426 width: 14px; 1427 height: 15px; 1428 background-image: url(minimal/images/remove.png); 1429} 1430 1431.icon-resn-confidential { 1432 width: 16px; 1433 height: 16px; 1434 background-image: none; 1435} 1436 1437.icon-resn-locked { 1438 background-image: none; 1439} 1440 1441.icon-resn-none { 1442 background-image: none; 1443} 1444 1445.icon-resn-privacy { 1446 background-image: none; 1447} 1448 1449.icon-rings { 1450 width: 9px; 1451 height: 9px; 1452 background-image: url(minimal/images/rings.png); 1453} 1454 1455.icon-selected { 1456 width: 12px; 1457 height: 12px; 1458 background-image: url(minimal/images/selected.png); 1459} 1460 1461.icon-sfamily { 1462 width: 24px; 1463 height: 24px; 1464 background-image: url(minimal/images/sfamily.png); 1465} 1466 1467.icon-source { 1468 width: 20px; 1469 height: 20px; 1470 background-image: url(minimal/images/source.png); 1471} 1472 1473/* Silhouettes on charts */ 1474.icon-silhouette-F { 1475 width: 37px; 1476 height: 50px; 1477 background-image: url(minimal/images/silhouette_female_small.png); 1478} 1479 1480.icon-silhouette-M { 1481 width: 37px; 1482 height: 50px; 1483 background-image: url(minimal/images/silhouette_male_small.png); 1484} 1485 1486.icon-silhouette-U { 1487 width: 37px; 1488 height: 50px; 1489 background-image: url(minimal/images/silhouette_unknown_small.png); 1490} 1491 1492.icon-indis { 1493 width: 24px; 1494 height: 24px; 1495 background-image: url(minimal/images/indis.png); 1496} 1497 1498.icon-pedigree { 1499 width: 24px; 1500 height: 24px; 1501 background-image: url(minimal/images/pedigree.png); 1502} 1503 1504.icon-search { 1505 width: 24px; 1506 height: 24px; 1507 background-image: url(minimal/images/search.png); 1508} 1509 1510/* Census assistant */ 1511.wt-census-assistant-form-control:focus { 1512 min-width: 12rem; 1513} 1514 1515/* 1516 * Drag and drop sortable lists 1517 */ 1518.wt-sortable-list { 1519} 1520 1521.wt-sortable-item { 1522 cursor: move; 1523} 1524 1525/* Some blocks show a reduced version on the right-hand side. */ 1526.wt-side-blocks .wt-side-block-optional { 1527 display: none !important; 1528} 1529 1530/* my page chart enhancements */ 1531.wt-block-content-charts { 1532 flex-flow: column-reverse; 1533 overflow: auto; 1534} 1535 1536.wt-block-content-todays-events-block { 1537 padding: .25rem; 1538} 1539 1540/* Some charts are wider than the page. */ 1541.wt-chart { 1542 overflow-x: auto; 1543 overflow-y: hidden; 1544} 1545 1546/* Fit thumbnail into parent on charts */ 1547.select2-selection.select2-selection--single { 1548 min-height: 36px; 1549 height: auto; 1550 padding: 2px 0; 1551} 1552 1553.select2-container .select2-selection--single .select2-selection__rendered { 1554 padding-left: 2px; 1555} 1556 1557.select2-selection--single .NAME { 1558 padding-left: 4px; 1559} 1560 1561/* 1562 * These selectors control how the short horizontal lines are positioned in the Charts 1563 * Optimized for Win10 and FF, Chrome and Edge browsers 1564 * Ancestors 1565 * Descendants 1566 * amily book 1567 * 1568 */ 1569 1570/* Ascentors */ 1571.wt-chart-ancestors .linea1 { 1572 margin-bottom: 4px; 1573} 1574 1575.wt-chart-ancestors .linea2 { 1576 margin-bottom: 7px; 1577} 1578 1579.wt-chart-ancestors .linea3 { 1580 margin-bottom: 4px; 1581} 1582 1583.wt-chart-ancestors .linea4 { 1584 margin-bottom: 7px; 1585} 1586 1587.wt-chart-ancestors .linea5 { 1588 vertical-align: top; 1589} 1590 1591/* Descendants */ 1592.wt-chart-descendants .lined1 { 1593 margin-bottom: 4px; 1594} 1595 1596.wt-chart-descendants .lined2 { 1597 margin-bottom: 7px; 1598} 1599 1600.wt-chart-descendants .lined3 { 1601 margin-bottom: 4px; 1602} 1603 1604.wt-chart-descendants .lined4 { 1605 margin-bottom: 7px; 1606} 1607 1608.wt-chart-descendants .linea5 { 1609 vertical-align: top; 1610} 1611 1612/* 1613 * Place hierarchy 1614 * 1615 * wt-place-hierarchy-page 1616 */ 1617 1618#place-hierarchy ul { 1619 list-style-type: none; 1620} 1621 1622.d-table-cell { 1623 padding-right: 5px; 1624} 1625 1626/* Some menus (e.g. languages) can be longer than a page */ 1627.dropdown-menu { 1628 max-height: 30rem; 1629 overflow-x: hidden; 1630} 1631 1632/* Forms */ 1633.col-form-label { 1634 font-weight: bold; 1635} 1636