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