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