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