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