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 webtrees theme */ 17@import "_base.css"; 18@import "_block-charts.css"; 19@import "_chart-ancestors.css"; 20@import "_chart-compact.css"; 21@import "_chart-descendants.css"; 22@import "_chart-family-book.css"; 23@import "_chart-fan.css"; 24@import "_chart-hourglass.css"; 25@import "_chart-interactive.css"; 26@import "_chart-lifespans.css"; 27@import "_chart-pedigree.css"; 28@import "_chart-pedigree-map.css"; 29@import "_chart-relationships.css"; 30@import "_chart-statistics.css"; 31@import "_chart-timeline.css"; 32@import "_list-branches.css"; 33@import "_list-individuals.css"; 34@import "_list-media.css"; 35@import "_list-notes.css"; 36@import "_list-places.css"; 37@import "_list-repositories.css"; 38@import "_list-sources.css"; 39@import "_mime-type-icons.css"; 40@import "_on-screen-keyboard.css"; 41 42/* Colors for chart boxes, etc. */ 43:root { 44 --sex-f-fg: #ff2080; 45 --sex-m-fg: #81a9cb; 46 --sex-u-fg: #81a9cb; 47 --sex-f-bg: #e9daf1; 48 --sex-m-bg: #edf7fd; 49 --sex-u-bg: #ffffff; 50 --chart-line: solid gray thin; 51} 52 53/* Override Bootstrap formatting */ 54.btn-link { 55 padding-left: 0.25rem; 56 padding-right: 0.25rem; 57} 58 59.table-given-name { 60 overflow-x: hidden; 61} 62 63.container-fluid { 64 padding-left: 5px; 65 padding-right: 5px; 66} 67 68table { 69 border-collapse: separate; 70} 71 72/* 73 * Pages have the following high-level structure: 74 * 75 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 76 * +---wt-header-wrapper 77 * | +---wt-header-container 78 * | +---wt-header-content 79 * | +---wt-accessibility-links 80 * | +---wt-site-logo 81 * | +---wt-site-title 82 * | +---wt-header-search 83 * | | +---wt-header-search-form 84 * | | +---wt-header-search-field 85 * | | +---wt-header-search-button 86 * | +---wt-secondary-navigation 87 * | | +---wt-user-menu 88 * | +---wt-primary-navigation 89 * | +---wt-genealogy-menu 90 * +---wt-main-wrapper 91 * | +---wt-main-container 92 * | +---wt-main-content 93 * | +---wt-messages 94 * | +---wt-page-title 95 * | +---wt-page-options wt-page-options-xxxxx 96 * | +---wt-page-content 97 * +---wt-footers 98 * +---wt-footer wt-footer-contact 99 * +---wt-footer wt-footer-cookies 100 * +---wt-footer wt-footer-page-views 101 * +---wt-footer wt-footer-powered-by 102 */ 103 104.wt-global { 105 color: #555; 106} 107 108.wt-header-wrapper { 109} 110 111.wt-header-container { 112} 113 114.wt-header-content { 115} 116 117.wt-accessibility-links { 118} 119 120.wt-site-logo { 121 order: 1; 122 flex: 0 0 272px; 123} 124 125.wt-site-logo:after { 126 height: 50px; 127 width: 242px; 128 content: url(webtrees/images/webtrees.png); 129} 130 131.wt-site-title { 132 order: 3; 133 flex: 0 0 calc(100% - 15rem); 134 font-size: 1.5rem; 135 font-weight: normal; 136} 137 138.wt-header-search { 139 order: 4; 140 flex: 0 0 15rem; 141 position: relative; 142 top: -0.75rem; 143} 144 145.wt-header-search-form { 146} 147 148.wt-header-search-field { 149} 150 151.wt-header-search-button { 152} 153 154.wt-secondary-navigation { 155 order: 2; 156 white-space: nowrap; 157 margin-bottom: 15px; 158} 159 160.wt-user-menu { 161 flex-wrap: nowrap; 162 justify-content: flex-end; 163} 164 165.wt-user-menu .nav-link { 166 display: inline-block; 167 padding: 0.5rem; 168} 169 170.wt-user-menu .nav-item + .nav-item::before { 171 content: "|"; 172} 173 174.wt-user-menu .dropdown-toggle::after { 175 display: none; 176} 177 178.wt-primary-navigation { 179 order: 5; 180 /* Extend to full page width */ 181 flex: 0 0 100vw; 182 max-width: 100vw; 183 /* Recalculate margins for content */ 184 margin: 0 calc(50% - 50vw); 185 padding: 0 calc(50vw - 50%); 186 border-bottom: 2px solid #81a9cb; 187 border-top: 2px solid #81a9cb; 188} 189 190.wt-genealogy-menu { 191 justify-content: center; 192} 193 194.wt-genealogy-menu .nav-item { 195 text-align: center; 196 min-width: 5rem; 197} 198 199.wt-genealogy-menu .nav-link::before { 200 display: block; 201} 202 203.wt-genealogy-menu .dropdown-toggle::after { 204 display: none; 205} 206 207.wt-genealogy-menu .dropdown-menu { 208 border-radius: 0; 209 border: thin solid #aaa; 210} 211 212.wt-genealogy-menu .dropdown-item { 213 /* Space between icons and align with submenu icons */ 214 padding: 0 5px 0 0; 215 line-height: 1.0; 216} 217 218.wt-genealogy-menu .dropdown-item::before { 219 vertical-align: text-top; 220 line-height: 2.4; 221 padding: 0 .25rem; 222} 223 224.menu-tree .nav-link::before { 225 content: url(webtrees/menu/tree.png); 226} 227 228.menu-tree .dropdown-item::before { 229 content: url(webtrees/menu/tree-tree.png); 230} 231 232.menu-chart .nav-link::before { 233 content: url(webtrees/menu/chart.png); 234} 235 236.menu-chart-ancestry::before { 237 content: url(webtrees/menu/chart-ancestors.png); 238} 239 240.menu-chart-compact::before { 241 content: url(webtrees/menu/chart-compact.png); 242} 243 244.menu-chart-descendants::before { 245 content: url(webtrees/menu/chart-descendants.png); 246} 247 248.menu-chart-familybook::before { 249 content: url(webtrees/menu/chart-family-book.png); 250} 251 252.menu-chart-fanchart::before { 253 content: url(webtrees/menu/chart-fanchart.png); 254} 255 256.menu-chart-hourglass::before { 257 content: url(webtrees/menu/chart-hourglass.png); 258} 259 260.menu-chart-lifespan::before { 261 content: url(webtrees/menu/chart-lifespan.png); 262} 263 264.menu-chart-pedigree::before { 265 content: url(webtrees/menu/chart-pedigree.png); 266} 267 268.menu-chart-pedigreemap::before { 269 content: url(webtrees/menu/chart-pedigree-map.png); 270} 271 272.menu-chart-relationship::before { 273 content: url(webtrees/menu/chart-relationship.png); 274} 275 276.menu-chart-statistics::before { 277 content: url(webtrees/menu/chart-statistics.png); 278} 279 280.menu-chart-timeline::before { 281 content: url(webtrees/menu/chart-timeline.png); 282} 283 284.menu-chart-tree::before { 285 content: url(webtrees/menu/chart-tree.png); 286} 287 288.menu-list .nav-link::before { 289 content: url(webtrees/menu/list.png); 290} 291 292.menu-branches::before { 293 content: url(webtrees/menu/branches.png); 294} 295 296.menu-list-fam::before { 297 content: url(webtrees/menu/list-fam.png); 298} 299 300.menu-list-indi::before { 301 content: url(webtrees/menu/list-indi.png); 302} 303 304.menu-list-note::before { 305 content: url(webtrees/menu/list-note.png); 306} 307 308.menu-list-obje::before { 309 content: url(webtrees/menu/list-obje.png); 310} 311 312.menu-list-plac::before { 313 content: url(webtrees/menu/list-plac.png); 314} 315 316.menu-list-repo::before { 317 content: url(webtrees/menu/list-repo.png); 318} 319 320.menu-list-sour::before { 321 content: url(webtrees/menu/list-sour.png); 322} 323 324.menu-calendar .nav-link::before { 325 content: url(webtrees/menu/calendar.png); 326} 327 328.menu-calendar-day::before { 329 content: url(webtrees/menu/calendar-calendar.png); 330} 331 332.menu-calendar-month::before { 333 content: url(webtrees/menu/calendar-calendar.png); 334} 335 336.menu-calendar-year::before { 337 content: url(webtrees/menu/calendar-calendar.png); 338} 339 340.menu-report .nav-link::before { 341 content: url(webtrees/menu/report.png); 342} 343 344.menu-report .dropdown-item::before { 345 content: url(webtrees/menu/report-report.png); 346} 347 348.menu-search .nav-link::before { 349 content: url(webtrees/menu/search.png); 350} 351 352.menu-search .dropdown-item::before { 353 content: url(webtrees/menu/search-search.png); 354} 355 356.menu-help .nav-link::before { 357 content: url(webtrees/menu/help.png); 358} 359 360.menu-clippings .nav-link::before { 361 content: url(webtrees/menu/clippings.png); 362} 363 364.menu-clippings-add::before { 365 content: url(webtrees/menu/clippings-add.png); 366} 367 368.menu-clippings-cart::before { 369 content: url(webtrees/menu/clippings-cart.png); 370} 371 372.menu-clippings-download::before { 373 content: url(webtrees/menu/edit-preferences.png); 374} 375 376.menu-clippings-empty::before { 377 content: url(webtrees/menu/edit-delete.png); 378} 379 380.menu-fam .nav-link::before { 381 content: url(webtrees/menu/fam.png); 382} 383 384.menu-fam-change::before { 385 content: url(webtrees/menu/edit-famchange.png); 386} 387 388.menu-fam-addchil::before { 389 content: url(webtrees/menu/edit-addchil.png); 390} 391 392.menu-fam-orderchil::before { 393 content: url(webtrees/menu/edit-orderchil.png); 394} 395 396.menu-fam-del::before { 397 content: url(webtrees/menu/edit-delete.png); 398} 399 400.menu-fam-addfav::before { 401 content: url(webtrees/menu/edit-add-favorite.png); 402} 403 404.menu-fam-editraw::before { 405 content: url(webtrees/menu/edit-fam.png); 406} 407 408.menu-indi .nav-link::before { 409 content: url(webtrees/menu/indi.png); 410} 411 412.menu-indi-addname::before { 413 content: url(webtrees/menu/edit-indi.png); 414} 415 416.menu-indi-editsex::before { 417 content: url(webtrees/menu/edit-indi.png); 418} 419 420.menu-indi-del::before { 421 content: url(webtrees/menu/edit-delete.png); 422} 423 424.menu-indi-addfav::before { 425 content: url(webtrees/menu/edit-add-favorite.png); 426} 427 428.menu-indi-editraw::before { 429 content: url(webtrees/menu/edit-indi.png); 430} 431 432.menu-obje .nav-link::before { 433 content: url(webtrees/menu/obje.png); 434} 435 436.menu-obje-edit::before { 437 content: url(webtrees/menu/edit-obje.png); 438} 439 440.menu-obje-link::before { 441 content: url(webtrees/menu/edit-link.png); 442} 443 444.menu-obje-del::before { 445 content: url(webtrees/menu/edit-delete.png); 446} 447 448.menu-obje-addfav::before { 449 content: url(webtrees/menu/edit-add-favorite.png); 450} 451 452.menu-obje-editraw::before { 453 content: url(webtrees/menu/edit-obje.png); 454} 455 456.menu-note .nav-link::before { 457 content: url(webtrees/menu/note.png); 458} 459 460.menu-note-edit::before { 461 content: url(webtrees/menu/edit-note.png); 462} 463 464.menu-note-del::before { 465 content: url(webtrees/menu/edit-delete.png); 466} 467 468.menu-note-addfav::before { 469 content: url(webtrees/menu/edit-add-favorite.png); 470} 471 472.menu-note-editraw::before { 473 content: url(webtrees/menu/edit-note.png); 474} 475 476.menu-record .nav-link::before { 477 content: url(webtrees/menu/indi.png); 478} 479 480.menu-record-del::before { 481 content: url(webtrees/menu/edit-delete.png); 482} 483 484.menu-record-editraw::before { 485 content: url(webtrees/menu/edit-record.png); 486} 487 488.menu-repo .nav-link::before { 489 content: url(webtrees/menu/repo.png); 490} 491 492.menu-repo-edit::before { 493 content: url(webtrees/menu/edit-repo.png); 494} 495 496.menu-repo-del::before { 497 content: url(webtrees/menu/edit-delete.png); 498} 499 500.menu-repo-addfav::before { 501 content: url(webtrees/menu/edit-add-favorite.png); 502} 503 504.menu-repo-editraw::before { 505 content: url(webtrees/menu/edit-repo.png); 506} 507 508.menu-sour .nav-link::before { 509 content: url(webtrees/menu/sour.png); 510} 511 512.menu-sour-edit::before { 513 content: url(webtrees/menu/edit-sour.png); 514} 515 516.menu-sour-del::before { 517 content: url(webtrees/menu/edit-delete.png); 518} 519 520.menu-sour-addfav::before { 521 content: url(webtrees/menu/edit-add-favorite.png); 522} 523 524.menu-sour-editraw::before { 525 content: url(webtrees/menu/edit-sour.png); 526} 527 528.menu-story .nav-link::before { 529 content: url(webtrees/menu/story.png); 530} 531 532.wt-main-container { 533 /* Space between the header/footer and the main content. */ 534 padding-top: 1rem; 535 padding-bottom: 1rem; 536} 537 538.wt-main { 539} 540 541.wt-messages { 542} 543 544.wt-page-title { 545 color: #006; 546 font-size: 1.5rem; 547 font-weight: bold; 548 text-align: center; 549} 550 551.wt-page-options { 552} 553 554.wt-page-content { 555} 556 557.wt-page-options .form-group { 558 margin-bottom: 2px; 559} 560 561.wt-page-options-label { 562 color: #fff; 563 background-color: #81a9cb; 564 font-weight: bold; 565 border-left: 2px solid transparent; 566 border-right: 2px solid transparent; 567} 568 569.wt-page-options-value { 570 background-color: #edf7f9; 571 border: solid #81a9cb 1px; 572 padding: 0.25rem 0.75rem; 573} 574 575.wt-page-content { 576 margin-top: 1rem; 577} 578 579.wt-footers { 580} 581 582.wt-footer { 583} 584 585.wt-footer-contact { 586} 587 588.wt-footer-cookies { 589 background: #aaa; 590 color: #fff; 591 transition: height 0.5s; 592} 593 594.wt-footer-page-views { 595} 596 597.wt-footer-powered-by { 598} 599 600.wt-footer-powered-by-webtrees { 601 width: 100px; 602 height: 21px; 603 content: url(images/powered-by-webtrees.png); 604} 605 606/* 607 * The tree/user home pages 608 * 609 * wt-home-page / wt-user-page 610 * +---wt-main-blocks 611 * | +---wt-block, wt-block-AAA 612 * | +---wt-block, wt-block-BBB 613 * | +---wt-block, wt-block-CCC 614 * +---wt-side-blocks 615 * +---wt-block, wt-block-XXX 616 * +---wt-block, wt-block-YYY 617 * +---wt-block, wt-block-ZZZ 618 * 619 * Each block as the structure 620 * wt-block, wt-block-XXX 621 * +---wt-block-header, wt-block-header-XXX 622 * +---wt-block-content, wt-block-content-XXX 623 */ 624 625.wt-block { 626 background-color: #edf7fd; 627 border: solid #81a9cb 1px; 628} 629 630.wt-block-header { 631 background-color: #edf7fd; 632 border-bottom: none; 633 font-weight: bold; 634} 635 636.wt-block-content { 637} 638 639.wt-block-content .list_table { 640 border-spacing: 1px; 641 border: solid #81a9cb 1px; 642 border-right: 0; 643} 644 645.wt-block-content .list_value, 646.wt-block-content .list_value_wrap { 647 border: 0; 648 border-top: solid #81a9cb 1px; 649 border-right: solid #81a9cb 1px; 650} 651 652/* 653 * The individual page. 654 * 655 * wt-route-individual 656 * +---wt-header-wrapper 657 */ 658 659.wt-individual-silhouette { 660 content: url(images/individual-silhouette-unknown.png); 661} 662 663.wt-individual-silhouette-f { 664 content: url(images/individual-silhouette-female.png); 665} 666 667.wt-individual-silhouette-m { 668 content: url(images/individual-silhouette-male.png); 669} 670 671/* 672 * Chart-boxes are used to build the various charts. 673 * Each type of chart will set its own size and hide/show content. 674 * 675 * wt-chart-box 676 * +--- wt-chart-box-thumbnail 677 * +--- wt-chart-box-extra 678 * +--- wt-chart-box-zoom 679 * +--- wt-chart-box-icon 680 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 681 * +--- wt-chart-box-links 682 * +--- wt-chart-box-icon 683 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 684 * +--- wt-chart-box-name 685 * +--- wt-chart-box-lifespan 686 * +--- wt-chart-box-facts 687 * +--- wt-chart-box-fact 688 */ 689.wt-chart-box, 690.wt-chart-box-menu { 691 background: var(--sex-u-bg); 692 border: dashed var(--sex-u-fg) thin; 693} 694 695.wt-chart-box { 696 height: 5rem; 697 padding: 2px; 698 line-height: 1.1; 699} 700 701.wt-chart-box-f, 702.wt-chart-box-f .wt-chart-box-dropdown { 703 background: var(--sex-f-bg); 704 border: solid var(--sex-f-fg) thin; 705} 706 707.wt-chart-box-m, 708.wt-chart-box-m .wt-chart-box-dropdown { 709 background: var(--sex-m-bg); 710 border: solid var(--sex-m-fg) thin; 711} 712 713/* 714 * Calendar 715 * 716 * wt-calendar-page 717 */ 718 719/* 720 * Reports 721 * 722 * wt-reports-page 723 */ 724 725/* 726 * Search 727 * 728 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page 729 */ 730 731a { 732 color: #555; 733 text-decoration: none; 734} 735 736a:hover { 737 color: #f00; 738 text-decoration: none; 739} 740 741:focus { 742 outline-style: none; 743} 744 745.flash-messages { 746 clear: both; 747 text-align: center; 748} 749 750img { 751 border: 0; 752} 753 754legend img { 755 height: 20px; 756 vertical-align: middle; 757 width: 20px; 758} 759 760img.block, 761#mycart img { 762 border: 0; 763 height: 25px; 764 vertical-align: middle; 765} 766 767.topbottombar { 768 background-color: #81a9cb; 769 color: #fff; 770 font-weight: bold; 771 padding: 4px; 772 text-align: center; 773} 774 775#mycart a img { 776 height: 15px; 777} 778 779.button { 780 width: 60px; 781} 782 783.alpha_index { 784 color: #999; 785} 786 787.news_box:target, 788#gedcom_stats:target { 789 background-color: #ffc; 790} 791 792/* families tab person box */ 793table.center { 794 margin-left: auto; 795 margin-right: auto; 796} 797 798.list_table { 799 margin: 0 auto; 800} 801 802.list_label, 803.list_label_wrap { 804 color: #fff; 805 background-color: #81a9cb; 806 font-weight: bold; 807 text-align: center; 808} 809 810.list_value, 811.list_value_wrap { 812 background-color: #edf7f9; 813 border: solid #81a9cb 1px; 814 vertical-align: top; 815 padding: 4px; 816} 817 818.list_label, 819.list_value { 820 white-space: nowrap; 821} 822 823.list_label_wrap, 824.list_value_wrap { 825 white-space: normal; 826} 827 828div.fact_SHARED_NOTE { 829 clear: both; 830} 831 832/* Table of genealogical facts */ 833 834.wt-facts-table caption { 835 caption-side: top; 836} 837 838.wt-facts-table th { 839 background-color: #81a9cb; 840 border: solid #81a9cb 1px; 841 text-align: center; 842 font-weight: normal; 843 min-width: 20%; 844} 845 846.wt-facts-table td { 847 background-color: #edf7fd; 848 border: solid #81a9cb 1px; 849} 850 851.wt-facts-table .wt-gender-M td { 852 background-color: #edf7fd; 853 border-color: #81a9cb; 854} 855 856.wt-facts-table .wt-gender-F td { 857 background-color: #e9daf1; 858 border-color: #ff2080; 859} 860 861.tabs_table { 862 width: 99%; 863} 864 865.name1 { 866 font-weight: bold; 867 font-size: 12px; 868} 869 870.name2 { 871 font-size: 16px; 872} 873 874a:hover .name1, a:hover .name2 { 875 color: #f00; 876 font-weight: bold; 877 font-size: 12px; 878} 879 880a:hover .nameZoom { 881 color: #f00; 882 font-size: 16px; 883 font-weight: bold; 884} 885 886.details0, 887.details1 { 888 font-size: 11px; 889} 890 891.details2 { 892 font-size: 12px; 893} 894 895.nameZoom { 896 color: #555; 897 font-size: 16px; 898 font-weight: bold; 899} 900 901.details_label { 902 font-weight: bold; 903} 904 905.name_head { 906 color: #555; 907 font-size: 16px; 908 font-weight: bold; 909 line-height: 2; 910 padding: 0 5px; 911} 912 913.date { 914 color: #337; 915} 916 917.label { 918 font-weight: bold; 919} 920 921.error { 922 color: #d00; 923 font-weight: bold; 924} 925 926.largeError { 927 color: #d00; 928 font-size: large; 929 font-weight: bold; 930} 931 932.warning { 933 color: #f00; 934 font-weight: bold; 935} 936 937.indent { 938 padding-left: 20px; 939} 940 941.image { 942 height: 150px; 943 padding: 5px; 944 margin: 2px; 945} 946 947.gender_image { 948 margin: 0 3px; 949 border: 0; 950 vertical-align: middle; 951} 952 953.thumbnail { 954 height: auto; 955 padding: 3px; 956} 957 958.icon { 959 border: 0; 960 padding: 0 5px; 961} 962 963.sublinks_cell { 964 background-color: #edf7fd; 965 font-size: 12px; 966} 967 968.submenu .icon { 969 vertical-align: middle; 970 width: 20px; 971 height: 20px; 972} 973 974.subheaders { 975 font-weight: bold; 976 font-size: 15px; 977 margin-top: 15px; 978 vertical-align: bottom; 979} 980 981#family-table .subheaders:first-child { 982 width: 285px; 983} 984 985.parentdeath { 986 border: thin solid #888; 987 padding: 1px; 988} 989 990.source_citations { 991 display: none; 992} 993 994.selected-option { 995 background-color: #edf7fd; 996} 997 998.border1 { 999 border: solid #000 1px; 1000} 1001 1002.menuitem { 1003 text-decoration: none; 1004 font-size: 11px; 1005 padding: 1px; 1006} 1007 1008.menuitem_hover { 1009 text-decoration: none; 1010 font-size: 11px; 1011 padding: 1px; 1012} 1013 1014.menuitem .icon, .menuitem_hover .icon { 1015 width: 50px; 1016 height: 50px; 1017} 1018 1019.submenu { 1020 text-decoration: none; 1021 font-size: 11px; 1022 background-color: #edf7fd; 1023 border: solid #81a9cb 1px; 1024 visibility: hidden; 1025 position: absolute; 1026 padding: 5px; 1027} 1028 1029.submenuitem { 1030 vertical-align: middle; 1031 font-size: 11px; 1032 height: 20px; 1033 text-decoration: none; 1034 background-color: #edf7fd; 1035 padding: 1px; 1036 white-space: nowrap; 1037} 1038 1039.submenuitem_hover { 1040 vertical-align: middle; 1041 height: 20px; 1042 font-size: 11px; 1043 background-color: #e6f0fa; 1044 white-space: nowrap; 1045 padding: 1px; 1046} 1047 1048.submenuitem a, 1049.submenuitem_hover a { 1050 display: inline-block; 1051 vertical-align: middle; 1052} 1053 1054.journal_box { 1055 padding: 3pt; 1056 border: thin solid #aaa; 1057 overflow: visible; 1058} 1059 1060.news_box { 1061 background-color: #edf7fd; 1062 border-top: solid #81a9cb 1px; 1063} 1064 1065.news_title { 1066 font-weight: bold; 1067} 1068 1069.news_date { 1070 margin-bottom: 12px; 1071} 1072 1073.current_day { 1074 font-weight: bold; 1075 font-size: 16px; 1076} 1077 1078.cal_day { 1079 float: left; 1080 font-weight: bold; 1081} 1082 1083.rtl_cal_day { 1084 direction: rtl; 1085 float: right; 1086 color: #00f; 1087 font-weight: bold; 1088} 1089 1090.helpcontent { 1091 margin-left: 10px; 1092 margin-right: 10px; 1093} 1094 1095.helpcontent dt { 1096 clear: both; 1097} 1098 1099#user-page h1 { 1100 margin: 0.25em auto 0.6em; 1101} 1102 1103.tvertline { 1104 vertical-align: bottom; 1105} 1106 1107#childbox { 1108 padding: 5px; 1109 position: absolute; 1110 display: none; 1111 text-align: start; 1112 white-space: nowrap; 1113 top: 20px; 1114 left: 0; 1115} 1116 1117.layout3 #childbox { 1118 top: auto; 1119 bottom: 20px; 1120} 1121 1122#childbox a.name1 { 1123 display: block; 1124 margin-left: 5px; 1125} 1126 1127.person0 { 1128 background-color: #aaf; 1129 border: outset #aaf 1px; 1130 vertical-align: top; 1131} 1132 1133.person1 { 1134 background-color: #afa; 1135 border: outset #afa 1px; 1136 vertical-align: top; 1137} 1138 1139.person2 { 1140 background-color: #faa; 1141 border: outset #faa 1px; 1142 vertical-align: top; 1143} 1144 1145.person3 { 1146 background-color: #55f; 1147 border: outset #55f 1px; 1148 vertical-align: top; 1149} 1150 1151.person4 { 1152 background-color: #f55; 1153 border: outset #f55 1px; 1154 vertical-align: top; 1155} 1156 1157.person5 { 1158 background-color: #5f5; 1159 border: outset #5f5 1px; 1160 vertical-align: top; 1161} 1162 1163.listlog { 1164 line-height: 20pt; 1165} 1166 1167.starredname { 1168 text-decoration: underline; 1169} 1170 1171.search_hit { 1172 background-color: #ff0; 1173} 1174 1175.search_item { 1176 font-weight: 600; 1177} 1178 1179.descriptionbox { 1180 color: #fff; 1181 font-size: 12px; 1182 background-color: #81a9cb; 1183 border: solid #81a9cb 1px; 1184 vertical-align: top; 1185 padding: 3px; 1186} 1187 1188.optionbox { 1189 background-color: #d1d9ef; 1190 font-size: 1rem; 1191 border: solid #81a9cb 1px; 1192 vertical-align: top; 1193 white-space: nowrap; 1194 padding: 3px; 1195} 1196 1197.vmiddle { 1198 vertical-align: middle; 1199} 1200 1201.red { 1202 color: #f00; 1203} 1204 1205.wt-relation-fact, 1206.wt-historic-fact { 1207 opacity: 0.8; 1208} 1209 1210.font9 { 1211 font-size: 9px; 1212} 1213 1214.font11 { 1215 font-size: 11px; 1216} 1217 1218.messagebox { 1219 background-color: #c2ceef; 1220 border: solid #81a9cb 1px; 1221} 1222 1223/* ---Pending edits--- */ 1224.new { 1225 outline: solid blue 1px; 1226} 1227 1228.old { 1229 outline: solid red 1px; 1230} 1231 1232.tag_cloud { 1233 text-align: center; 1234} 1235 1236.tag_cloud a { 1237 white-space: nowrap; 1238} 1239 1240.nowrap { 1241 white-space: nowrap; 1242} 1243 1244.wrap { 1245 white-space: normal; 1246} 1247 1248.statistics-page { 1249 text-align: center; 1250} 1251 1252.gchart { 1253 border: solid #81a9cb 1px; 1254} 1255 1256/* ---Find special characters--- */ 1257.largechars { 1258 font-family: monospace; 1259 font-size: 200%; 1260} 1261 1262#facts_content dd { 1263 float: left; 1264 width: 70%; 1265} 1266 1267td.descriptionbox a { 1268 color: #fff; 1269} 1270 1271/* this keeps the tag color the same when it is a link as when not */ 1272 1273.place { 1274 padding-top: 5px; 1275} 1276 1277#pending h2 { 1278 text-align: center; 1279 margin-bottom: 20px; 1280} 1281 1282#pending h3 { 1283 text-align: center; 1284 margin-top: 20px; 1285} 1286 1287#pending a { 1288 font-weight: 700; 1289 color: #555; 1290} 1291 1292#pending a:hover { 1293 color: #f00; 1294} 1295 1296#pending .list_value { 1297 padding: 3px; 1298 text-align: center; 1299 vertical-align: middle; 1300 white-space: nowrap; 1301} 1302 1303#pending .indent { 1304 padding: 0; 1305} 1306 1307/* --- reportengine.php --- */ 1308#reportengine-page table { 1309 margin: 20px auto; 1310} 1311 1312#reportengine-page .report-type { 1313 overflow: hidden; 1314 margin: auto; 1315 width: 180px; 1316} 1317 1318#reportengine-page .report-type div { 1319 float: left; 1320 margin: 0 20px; 1321} 1322 1323#reportengine-page .report-type p { 1324 margin: 0; 1325 text-align: center; 1326} 1327 1328/* styles for popup menus */ 1329.itr { 1330 position: absolute; 1331 line-height: 1.5; 1332} 1333 1334.popup { 1335 position: absolute; 1336 top: 20px; 1337 right: 0; 1338 left: auto; 1339 visibility: hidden; 1340 opacity: 0; 1341 transition: visibility 0s ease .25s, opacity .25s ease; 1342 z-index: 9999; 1343 box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .4); 1344} 1345 1346.popup ul { 1347 white-space: nowrap; 1348 list-style: none; 1349 margin: 0; 1350 padding: 0 10px; 1351 font-size: smaller; 1352} 1353 1354.popup > ul { 1355 padding: 2px 10px; 1356} 1357 1358.popup li .NAME { 1359 padding: 0 5px; 1360} 1361 1362.itr:hover .popup { 1363 visibility: visible; 1364 opacity: 1; 1365 transition-delay: 0s; 1366} 1367 1368/* styles for FindFacts pop-up */ 1369#layDefinedTags, 1370#tabDefinedTagsShow { 1371 width: 450px; 1372} 1373 1374#tabDefinedTags { 1375 width: 430px; 1376} 1377 1378#layDefinedTags { 1379 margin-left: auto; 1380 margin-right: auto; 1381 height: 285px; 1382 overflow: auto; 1383} 1384 1385#tabDefinedTags { 1386 border-collapse: collapse; 1387} 1388 1389#tabDefinedTags th, 1390#tabDefinedTags td { 1391 border: solid 1px #000; 1392 margin: 0; 1393 padding: 3px; 1394} 1395 1396#tabDefinedTags tbody th { 1397 text-align: left; 1398 font-weight: bold; 1399} 1400 1401#tabDefinedTags tr.sel { 1402 background-color: #d1d9ef; 1403 color: #888; 1404} 1405 1406#tabDefinedTags tr.unsel { 1407 background-color: #fff; 1408 color: #888; 1409} 1410 1411#tabDefinedTagsShow { 1412 margin-left: auto; 1413 margin-right: auto; 1414} 1415 1416#tabDefinedTagsShow td { 1417 width: 50%; 1418 text-align: center; 1419} 1420 1421#tabFilterAndCustom { 1422 margin-left: auto; 1423 margin-right: auto; 1424} 1425 1426#tabAction { 1427 margin-left: auto; 1428 margin-right: auto; 1429} 1430 1431#tabAction td { 1432 width: 50%; 1433 text-align: center; 1434} 1435 1436/* ======== List styles ====== */ 1437.surname-list, 1438.givn-list { 1439 margin: 5px auto; 1440} 1441 1442.source-list table, 1443.note-list table, 1444.repo-list table, 1445.media-list table, 1446.indi-list table, 1447.fam-list table { 1448 width: 100%; 1449} 1450 1451.source-list td, 1452.note-list td, 1453.repo-list td, 1454.media-list td, 1455.indi-list td, 1456.fam-list td, 1457.surname-list td, 1458.givn-list td { 1459 padding: 2px 5px; 1460} 1461 1462.surname-list td { 1463 vertical-align: top; 1464} 1465 1466.indi-list .stats, 1467.fam-list .stats { 1468 margin: 0 auto; 1469 width: auto; 1470} 1471 1472.source-list th, 1473.note-list th, 1474.repo-list th, 1475.media-list th, 1476.indi-list th, 1477.fam-list th, 1478.wt-table-changes th, 1479.wt-table-events th, 1480.wt-table-tasks th, 1481.wt-table-yahrzeits th, 1482.surname-list th, 1483.givn-list th { 1484 cursor: pointer; 1485 font-weight: 600; 1486 padding: 2px 4px; 1487 white-space: nowrap; 1488} 1489 1490.source-list th:last-child, 1491.note-list th:last-child, 1492.repo-list th:last-child { 1493 margin: 0 -2px 1px 1px; 1494 padding: 3px 0 4px; 1495 width: 24px; 1496} 1497 1498.givn-list th { 1499 cursor: pointer; 1500 white-space: nowrap; 1501 padding: 2px; 1502 text-align: center; 1503} 1504 1505#source-details h2, 1506#sourcelist-page h2, 1507#note-details h2, 1508#notelist-page h2, 1509#repo-details h2, 1510#repolist-page h2, 1511#media-details h2, 1512#statistics-page h2 { 1513 margin-bottom: 20px; 1514 text-align: center; 1515} 1516 1517#source-edit, 1518#note-edit, 1519#repo-edit, 1520#media-edit { 1521 overflow-x: auto; 1522} 1523 1524.media-list td img { 1525 display: block; 1526 height: 40px; 1527 width: auto; 1528 margin: 3px auto; 1529} 1530 1531.filtersH, 1532.filtersF { 1533 margin: 4px; 1534} 1535 1536.filtersH img { 1537 margin-bottom: 2px; 1538} 1539 1540.list-charts { 1541 text-align: center; 1542} 1543 1544#search-result-tabs h3 { 1545 text-align: center; 1546} 1547 1548#searchAccordion-indi, 1549#searchAccordion-fam, 1550#searchAccordion-source, 1551#searchAccordion-note { 1552 margin: auto; 1553 width: 99%; 1554} 1555 1556#place-hierarchy h2, 1557#place-hierarchy h4 { 1558 text-align: center; 1559} 1560 1561#main_select, 1562#available_select, 1563#right_select { 1564 min-width: 150px; 1565} 1566 1567/* ==== Favourites block ===== */ 1568.add_fav_head { 1569 font-weight: 900; 1570 margin: 5px 0; 1571} 1572 1573.add_fav_head i { 1574 margin: 0 5px 1px; 1575} 1576 1577.add_fav_ref label { 1578 display: inline-block; 1579 min-width: 100px; 1580} 1581 1582.add_fav_ref input { 1583 margin: 0 5px; 1584} 1585 1586/* === Who is online block === */ 1587.logged_in_list { 1588 margin: 5px 0 0; 1589 padding: 0; 1590 line-height: 20px; 1591} 1592 1593/* ==== Theme select block === */ 1594.theme_form ul { 1595 margin: -10px auto; 1596} 1597 1598.theme_form li { 1599 visibility: hidden; 1600} 1601 1602.theme_form li ul li { 1603 display: inline-block; 1604 padding: 10px; 1605 visibility: visible; 1606} 1607 1608/* ==== FAQ table styles ===== */ 1609table.faq { 1610 background-color: #e0e0e0; 1611 margin: 5px 0 50px 5px; 1612 width: 98%; 1613} 1614 1615table.faq tr:nth-child(odd) td { 1616 background-color: #e7eef3; 1617} 1618 1619div.faq_title { 1620 background-color: #e0e0e0; 1621 margin: 1em 0; 1622 padding: .25em; 1623 font-weight: bold; 1624 width: 98%; 1625} 1626 1627div.faq_body { 1628 clear: both; 1629 padding: 0 1em; 1630} 1631 1632.faq_top { 1633 float: right; 1634} 1635 1636/* === Positioning edit, copy, delete links === */ 1637/* General use */ 1638.editfacts { 1639 clear: left; 1640 padding-top: 15px; 1641} 1642 1643/* ======== Indi header ====== */ 1644#indi_header { 1645 overflow: hidden; 1646 border-radius: 3px; 1647 border: 1px solid #b2c7d7; 1648 margin: 0 0 5px; 1649 padding: 10px 0; 1650} 1651 1652#indi_header h3 { 1653 font-size: 90%; 1654 font-weight: bold; 1655 margin: 0; 1656 padding: 0 10px 0 30px; 1657 text-align: left; 1658 overflow: hidden; 1659 position: relative; 1660} 1661 1662#indi_header .name_one { 1663 font-size: 1.5em; 1664} 1665 1666#indi_header h3 .details1 { 1667 font-size: 1.0em; 1668} 1669 1670#indi_header h3 .header_age { 1671 padding: 5px 0 5px 5px; 1672 float: right; 1673 font-weight: normal; 1674 font-size: 65%; 1675} 1676 1677#indi_header h3 a { 1678 display: inline; 1679} 1680 1681#indi_header a { 1682 color: #337; 1683 font-size: 0.75em; 1684 font-weight: normal; 1685} 1686 1687#indi_header a:hover { 1688 color: #f00; 1689} 1690 1691#indi_mainimage { 1692 float: left; 1693 padding: 0 10px; 1694} 1695 1696#header_accordion1 { 1697 padding: 0 10px 0 0; 1698 overflow: hidden; 1699} 1700 1701#header_accordion1 .indi_name_details { 1702 margin: 0; 1703 overflow: hidden; 1704 padding: 5px; 1705} 1706 1707.indi_name_details .name1 { 1708 font-weight: normal; 1709 padding-top: 5px; 1710 font-size: inherit; 1711} 1712 1713#indi_header a.warning { 1714 color: #f00; 1715 font-size: 1em; 1716} 1717 1718#indi_note { 1719 margin: 0 0 5px; 1720} 1721 1722.indi_table { 1723 clear: left; 1724} 1725 1726#sex { 1727 float: right; 1728} 1729 1730#dates { 1731 float: right; 1732} 1733 1734#individual-names .wt-icon-edit, 1735#individual-names .wt-icon-delete { 1736 float: right; 1737} 1738 1739#indi_note .fact_NOTE { 1740 float: left; 1741 margin: 0 5px 0 0; 1742} 1743 1744#indi_note .fact_SOUR { 1745 margin: 3px 0; 1746} 1747 1748#indi_note .fact_SOUR a { 1749 font-size: 100%; 1750} 1751 1752#indi_note .fact_NOTE, 1753#indi_note .fact_SOUR { 1754 clear: both; 1755} 1756 1757/* markdown formatting */ 1758 1759.markdown { 1760 /* Tables and pre-formatted text can break the layout. */ 1761 overflow-x: auto; 1762} 1763 1764.markdown p { 1765 margin: 0 0 0.5em; 1766 white-space: pre-wrap; 1767} 1768 1769.markdown table { 1770 border-collapse: collapse; 1771 margin-bottom: 5px; 1772} 1773 1774.markdown th { 1775 font-weight: bold; 1776} 1777 1778.markdown td, 1779.markdown th { 1780 border: solid thin #000; 1781 padding: 3px; 1782} 1783 1784.odometer { 1785 font-family: courier, monospace; 1786 font-weight: bold; 1787 background: #000; 1788 color: #fff; 1789} 1790 1791/* ======== Indi tabs ======== */ 1792/* Facts & Events tab */ 1793#personal_facts_content .fact_NOTE, 1794#personal_facts_content .fact_SOUR, 1795#family-table .fact_NOTE, 1796#family-table .fact_SOUR { 1797 margin: 5px 3px 5px 0; 1798 clear: both; 1799} 1800 1801.media-display-image { 1802 float: left; 1803} 1804 1805.media-display-title { 1806 float: left; 1807 font-style: italic; 1808 margin: 10px; 1809} 1810 1811/* === jQuery.datatable styling general over-rides === */ 1812.odd { 1813 background-color: #e7eef3; 1814} 1815 1816.even { 1817 background-color: #e6e6e6; 1818} 1819 1820.css_right { 1821 float: left; 1822} 1823 1824.fg-button { 1825 padding: 2px 6px; 1826} 1827 1828.dataTables_paginate { 1829 float: left; 1830 margin-bottom: 3px; 1831} 1832 1833.dataTables_processing { 1834 float: left; 1835} 1836 1837.dataTables_filter { 1838 float: right; 1839 font-weight: normal; 1840} 1841 1842.dataTables_info { 1843 float: left; 1844 font-weight: normal; 1845 padding: 4px; 1846} 1847 1848.dataTables_length { 1849 float: right; 1850 font-weight: normal; 1851} 1852 1853.dataTables_length select, 1854.dataTables_filter input { 1855 font-size: 11px; 1856 padding: 1px; 1857} 1858 1859.dt-clear { 1860 clear: both; 1861} 1862 1863#loading { 1864 text-align: center; 1865} 1866 1867.DataTables_sort_wrapper { 1868 position: relative; 1869 margin: 0 20px; 1870} 1871 1872.DataTables_sort_wrapper span { 1873 left: 0; 1874 margin-left: -20px; 1875 margin-top: -8px; 1876 position: absolute; 1877 top: 50%; 1878} 1879 1880.dataTables_wrapper { 1881 margin-bottom: 10px; 1882} 1883 1884/* ======= Sidebar setup ===== */ 1885#main { 1886 min-width: 600px; 1887 width: 100%; 1888 display: table; 1889 table-layout: fixed; 1890} 1891 1892#indi_left { 1893 display: table-cell; 1894} 1895 1896#tabs { 1897 background-color: #fff; 1898 border-color: #ddd; 1899 margin-left: 0; 1900 overflow: visible; 1901 width: 100%; 1902} 1903 1904/* sidebar */ 1905#sidebar { 1906 width: 20%; 1907 display: table-cell; 1908 vertical-align: top; 1909} 1910 1911/* Sidebar - Family navigator */ 1912.wt-family-navigator-dropdown { 1913 background: #edf7fd; 1914} 1915 1916.wt-family-navigator-dropdown-heading { 1917 font-weight: bold; 1918 font-size: inherit; 1919 color: inherit; 1920} 1921 1922/* Sidebar - Descendants */ 1923#sb_content_descendancy { 1924 margin-top: 5px; 1925} 1926 1927#sb_desc_content { 1928 margin-left: 3px; 1929 font-size: 0.8em; 1930} 1931 1932#sb_desc_content ul { 1933 padding: 0; 1934 margin: 0; 1935} 1936 1937.sb_desc_indi_li { 1938 list-style-type: none; 1939} 1940 1941.desc_tree_div { 1942 display: none; 1943} 1944 1945.desc_tree_div ul { 1946 padding: 0; 1947 margin-left: 10px; 1948 margin-top: 0; 1949 margin-right: 0; 1950} 1951 1952/* Individuals and Families */ 1953#sidebar-content-individuals, 1954#sidebar-content-families { 1955 margin-top: 5px; 1956} 1957 1958.sb_indi_surname_li, 1959.sb_fam_surname_li { 1960 list-style-image: url(webtrees/images/plus.png); 1961} 1962 1963.name_tree_div ul { 1964 padding: 0; 1965 margin: 0; 1966} 1967 1968.name_tree_div li { 1969 list-style: none; 1970 margin: 0; 1971 padding: 0; 1972} 1973 1974/* Clippings */ 1975#sb_clippings_content ul { 1976 padding: 0; 1977 margin: 0; 1978} 1979 1980#sb_clippings_content li { 1981 list-style: none; 1982 margin: 0; 1983 padding: 0; 1984 white-space: nowrap; 1985} 1986 1987/* Extra info */ 1988#sb_content_extra_info { 1989 font-size: 80%; 1990 font-weight: bold; 1991 margin-top: 1px; 1992 overflow: hidden; 1993 padding: 5px; 1994} 1995 1996#sb_content_extra_info .editfacts { 1997 float: right; 1998 margin-top: -30px; 1999} 2000 2001#sb_content_extra_info a { 2002 display: block; 2003} 2004 2005#sb_content_extra_info span { 2006 font-weight: normal; 2007} 2008 2009#sb_content_extra_info span a { 2010 display: inline; 2011} 2012 2013#sb_content_extra_info #hitcounter { 2014 border-top: 1px solid #b2c7d7; 2015 font-weight: bold; 2016 padding-top: 5px; 2017} 2018 2019/* http://www.jacklmoore.com/colorbox */ 2020#colorbox, 2021#cboxOverlay, 2022#cboxWrapper { 2023 position: absolute; 2024 top: 0; 2025 left: 0; 2026 z-index: 9999; 2027 overflow: hidden; 2028} 2029 2030#cboxWrapper { 2031 max-width: none; 2032} 2033 2034#cboxOverlay { 2035 position: fixed; 2036 width: 100%; 2037 height: 100%; 2038 background: #fff; 2039} 2040 2041#cboxContent { 2042 background: #fff; 2043 overflow: hidden; 2044 position: relative; 2045 padding: 0.5rem; 2046 border: 0.25rem solid #ccc; 2047} 2048 2049#cboxLoadingOverlay, 2050#cboxLoadingGraphic { 2051 position: absolute; 2052 top: 0; 2053 left: 0; 2054 width: 100%; 2055 height: 100%; 2056} 2057 2058.cboxPhoto { 2059 float: left; 2060 margin: auto; 2061 border: 0; 2062 display: block; 2063 max-width: none; 2064} 2065 2066#colorbox, 2067#cboxContent, 2068#cboxLoadedContent { 2069 box-sizing: content-box; 2070} 2071 2072#cboxError { 2073 padding: 50px; 2074 border: 1px solid #ccc; 2075} 2076 2077#cboxLoadedContent { 2078 margin-bottom: 28px; 2079} 2080 2081#cboxTitle { 2082 background: #fff; 2083 position: absolute; 2084 bottom: 0.25rem; 2085 left: 0; 2086 margin: 0 3rem; 2087 text-align: center; 2088} 2089 2090#cboxLoadingGraphic { 2091 background: url(images/loading-32x32.gif) no-repeat center center; 2092} 2093 2094#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { 2095 background: none; 2096 border: 0; 2097 cursor: pointer; 2098 font-family: "Font Awesome\ 5 Free", sans-serif; 2099 font-weight: 900; 2100 overflow: visible; 2101 padding: 0; 2102 position: absolute; 2103} 2104 2105#cboxSlideshow { 2106 bottom: 0.25rem; 2107 right: 0.25rem; 2108} 2109 2110#cboxPrevious { 2111 bottom: 0.25rem; 2112 left: 0.25rem; 2113} 2114 2115#cboxNext { 2116 bottom: 0.25rem; 2117 left: 1.5rem; 2118} 2119 2120#cboxClose { 2121 top: 0.25rem; 2122 right: 0.25rem; 2123} 2124 2125/* Stories module */ 2126.story_title { 2127 padding-top: 12px; 2128 font-size: 13px; 2129 height: 32px; 2130 font-weight: bold; 2131} 2132 2133.story_body { 2134 padding: 20px; 2135 white-space: normal; 2136} 2137 2138.story_edit { 2139 padding: 12px; 2140} 2141 2142/* ====== Charts Styles ======== */ 2143#people label { 2144 display: block; 2145} 2146 2147/* Ancestry chart */ 2148.wt-chart-ancestors-list { 2149 background: transparent url(images/vline.png) left top repeat-y; 2150 margin: 0 0 0 15px; 2151 padding: 0; 2152 display: block; 2153} 2154 2155.wt-chart-ancestors-list-item { 2156 margin: 5px 0; 2157} 2158 2159.chart_common li { 2160 list-style: outside none none; 2161} 2162 2163.generations { 2164 background: transparent url(images/vline.png) repeat-y scroll left top; 2165 display: block; 2166 margin: 0 0 0 15px; 2167 padding: 0; 2168} 2169 2170.chart_common table { 2171 padding: 0; 2172 border-spacing: 0; 2173 border-collapse: collapse; 2174 margin: 5px 0; 2175} 2176 2177.chart_common td { 2178 border: 0; 2179 padding: 0; 2180} 2181 2182.chart_common span.details1 div[class^=fact_] { 2183 display: inline-block; 2184} 2185 2186.chart_common span.details1 .date { 2187 color: inherit; 2188} 2189 2190/*-- Family book --*/ 2191#familybook_chart { 2192 margin-left: 10px; 2193} 2194 2195#familybook_chart table { 2196 border-collapse: collapse; 2197 empty-cells: show; 2198} 2199 2200#familybook_chart td { 2201 margin: 0; 2202 padding: 0; 2203} 2204 2205#familybook_chart h2 { 2206 text-align: center; 2207} 2208 2209#familybook_chart .line3, 2210#familybook_chart .pvline, 2211#familybook_chart .spacer { 2212 width: 3px; 2213} 2214 2215#familybook_chart .line4 { 2216 width: 7px; 2217 vertical-align: middle; 2218} 2219 2220[ID^="vline"] { 2221 width: 3px; 2222} 2223 2224#familybook_chart h3 { 2225 color: #006; 2226 font-size: 16px; 2227 text-align: center; 2228} 2229 2230/*-- Fan chart ---- */ 2231.fan_chart_menu { 2232 position: absolute; 2233 display: none; 2234 z-index: 100; 2235} 2236 2237#fan_chart ul { 2238 list-style-type: none; 2239 margin: 0; 2240} 2241 2242/* Lifespans chart */ 2243.wt-lifespans-subtitle { 2244 text-align: center; 2245} 2246 2247.wt-lifespans-scale { 2248 white-space: nowrap; 2249} 2250 2251.wt-lifespans-decade { 2252 width: 70px; 2253 height: 60px; 2254 display: inline-block; 2255 background-image: url(images/lifespan-decade.png); 2256 background-position-y: bottom; 2257 background-repeat: no-repeat; 2258 background-size: 70px 37px; 2259} 2260 2261.wt-lifespans-individuals { 2262 background: #fafafa; 2263} 2264 2265.wt-lifespans-individual { 2266 2267} 2268 2269.wt-lifespans-summary { 2270 background: #ffffff; 2271 border: thin solid #000; 2272 z-index: 1; 2273} 2274 2275.wt-lifespans-summary-link { 2276 font-weight: bold; 2277} 2278 2279/*-- Pedigree ---- */ 2280#pedigree_chart { 2281 position: relative; 2282 margin: 20px auto; 2283} 2284 2285#pedigree_canvas { 2286 color: #81a9cb; 2287 z-index: -1000; 2288} 2289 2290#pedigree-page .shadow { 2291 position: absolute; 2292 white-space: nowrap; 2293} 2294 2295#pedigree-page .layout0 .shadow > div, 2296#pedigree-page .layout1 .shadow > div { 2297 display: inline-block; 2298 vertical-align: middle; 2299} 2300 2301#pedigree-page .spacer { 2302 background-image: url(images/spacer.png); 2303 height: 20px; 2304 width: 1px; 2305} 2306 2307#childarrow, 2308.ancestorarrow { 2309 text-align: center; 2310} 2311 2312#pedigree-page #childarrow { 2313 position: relative; 2314} 2315 2316#pedigree-page #childbox { 2317 border: 1px solid; 2318 background-color: #fff; 2319} 2320 2321#pedigree-page table.list_table { 2322 margin: 0 auto; 2323 width: 500px; 2324} 2325 2326.pedigree_chart_table { 2327 border: 0; 2328 border-collapse: collapse; 2329 padding: 0; 2330 width: 100%; 2331} 2332 2333/*-- timeline --*/ 2334#timeline_chart { 2335 position: relative; 2336 top: 0; 2337 left: 0; 2338} 2339 2340#field_table { 2341 width: 30%; 2342 min-width: 500px; 2343} 2344 2345/* 2346 * Any element that is loaded dynamically has the class wt-ajax-load. 2347 * We can provide a "loading" placeholder for empty elements with this class. 2348 */ 2349.wt-ajax-load:empty { 2350 height: 32px; 2351 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 2352} 2353 2354/* 2355 * Default icons are provided by FontAwesome. 2356 * Some icons get mirrored on RTL pages. Typiclly arrows 2357 */ 2358[dir=rtl] .wt-flip-rtl { 2359 transform: scale(-1, 1); 2360} 2361 2362.wt-icon-anniversary { 2363 content: url(images/anniversary.png); 2364} 2365 2366.wt-icon-arrow-down { 2367 content: url(webtrees/icons/arrow-down.png); 2368} 2369 2370a > .wt-icon-arrow-down:hover { 2371 content: url(webtrees/icons/arrow-down-hover.png); 2372} 2373 2374.wt-icon-arrow-left { 2375 content: url(webtrees/icons/arrow-left.png); 2376} 2377 2378a > .wt-icon-arrow-left:hover { 2379 content: url(webtrees/icons/arrow-left-hover.png); 2380} 2381 2382.wt-icon-arrow-right { 2383 content: url(webtrees/icons/arrow-right.png); 2384} 2385 2386a > .wt-icon-arrow-right:hover { 2387 content: url(webtrees/icons/arrow-right-hover.png); 2388} 2389 2390.wt-icon-arrow-up { 2391 content: url(webtrees/icons/arrow-up.png); 2392} 2393 2394a > .wt-icon-arrow-up:hover { 2395 content: url(webtrees/icons/arrow-up-hover.png); 2396} 2397 2398.wt-icon-coordinates { 2399 content: url(images/coordinates.png) 2400} 2401 2402.wt-icon-reorder { 2403 content: url(images/reorder.png); 2404} 2405 2406.wt-icon-sex-f { 2407 content: url(images/sex-female.png); 2408} 2409 2410.wt-icon-sex-m { 2411 content: url(images/sex-male.png); 2412} 2413 2414.wt-icon-sex-u { 2415 content: url(images/sex-unknown.png); 2416} 2417 2418.wt-icon-sex-x { 2419 content: url(images/sex-unknown.png); 2420} 2421 2422.wt-icon-warning { 2423 content: url(images/warning.png); 2424} 2425 2426.wt-icon-zoom-in { 2427 content: url(webtrees/images/zoomin.png); 2428} 2429 2430.wt-icon-zoom-out { 2431 content: url(webtrees/images/zoomout.png); 2432} 2433 2434/* 2435 * .wt-icon-bing-maps 2436 * .wt-icon-calendar 2437 * .wt-icon-copy 2438 * .wt-icon-delete 2439 * .wt-icon-edit 2440 * .wt-icon-email 2441 * .wt-icon-family 2442 * .wt-icon-help 2443 * .wt-icon-individual 2444 * .wt-icon-google-maps 2445 * .wt-icon-keyboard 2446 * .wt-icon-media 2447 * .wt-icon-note 2448 * .wt-icon-openstreetmap 2449 * .wt-icon-preferences 2450 * .wt-icon-repository 2451 * .wt-icon-source 2452 * .wt-icon-submitter 2453 */ 2454.wt-icon-bing-maps::before { 2455 width: 16px; 2456 height: 16px; 2457 content: url(webtrees/icons/bing-maps.png); 2458} 2459 2460.wt-icon-calendar::before { 2461 width: 19px; 2462 height: 15px; 2463 content: url(webtrees/icons/calendar.png) 2464} 2465 2466.wt-icon-copy::before { 2467 width: 16px; 2468 height: 16px; 2469 content: url(webtrees/icons/copy.png) 2470} 2471 2472.wt-icon-delete::before { 2473 width: 16px; 2474 height: 16px; 2475 content: url(webtrees/icons/delete.png); 2476} 2477 2478.wt-icon-edit::before { 2479 width: 16px; 2480 height: 16px; 2481 content: url(webtrees/icons/edit.png); 2482} 2483 2484.wt-icon-family::before { 2485 width: 14px; 2486 height: 15px; 2487 content: url(webtrees/icons/family.png); 2488} 2489 2490.wt-icon-help::before { 2491 width: 16px; 2492 height: 16px; 2493 content: url(webtrees/icons/help.png); 2494} 2495 2496.wt-icon-google-maps::before { 2497 width: 16px; 2498 height: 16px; 2499 content: url(webtrees/icons/google-maps.png); 2500} 2501 2502.wt-icon-individual::before { 2503 width: 11px; 2504 height: 15px; 2505 content: url(webtrees/icons/individual.png); 2506} 2507 2508.wt-icon-keyboard::before { 2509 width: 30px; 2510 height: 15px; 2511 content: url(webtrees/icons/keyboard.png); 2512} 2513 2514.wt-icon-media::before { 2515 width: 18px; 2516 height: 16px; 2517 content: url(webtrees/icons/media.png); 2518} 2519 2520.wt-icon-note::before { 2521 width: 20px; 2522 height: 20px; 2523 content: url(webtrees/icons/note.png); 2524} 2525 2526.wt-icon-openstreetmap::before { 2527 width: 16px; 2528 height: 16px; 2529 content: url(webtrees/icons/openstreetmap.png); 2530} 2531 2532.wt-icon-preferences::before { 2533 width: 25px; 2534 height: 25px; 2535 content: url(webtrees/icons/preferences.png); 2536} 2537 2538.wt-icon-repository::before { 2539 width: 15px; 2540 height: 15px; 2541 content: url(webtrees/icons/repository.png); 2542} 2543 2544.wt-icon-source::before { 2545 width: 18px; 2546 height: 16px; 2547 content: url(webtrees/icons/source.png); 2548} 2549 2550.wt-icon-submitter::before { 2551 width: 11px; 2552 height: 15px; 2553 content: url(webtrees/icons/individual.png); 2554} 2555 2556[class^="icon-"], 2557[class*=" icon-"] { 2558 display: inline-block; 2559 vertical-align: text-bottom; 2560 background-repeat: no-repeat; 2561 background-size: cover; 2562} 2563 2564.icon-add { 2565 width: 14px; 2566 height: 15px; 2567 background-image: url(images/add.png); 2568} 2569 2570.icon-cfamily { 2571 width: 20px; 2572 height: 20px; 2573 background-image: url(webtrees/images/family.png); 2574} 2575 2576.icon-childless { 2577 width: 25px; 2578 height: 25px; 2579 background-image: url(webtrees/images/childless.png); 2580} 2581 2582.icon-children { 2583 width: 16px; 2584 height: 16px; 2585 background-image: url(webtrees/images/children.png); 2586} 2587 2588.icon-clippings { 2589 width: 22px; 2590 height: 22px; 2591 background-image: url(webtrees/images/clippings.png); 2592} 2593 2594.icon-edit_indi { 2595 width: 20px; 2596 height: 20px; 2597 background-image: url(webtrees/images/edit_indi.png); 2598} 2599 2600.icon-fam-list { 2601 width: 20px; 2602 height: 20px; 2603 background-image: url(webtrees/images/family.png); 2604} 2605 2606.icon-indi-list { 2607 width: 20px; 2608 height: 20px; 2609 background-image: url(webtrees/images/indis.png); 2610} 2611 2612.icon-loading-small { 2613 width: 16px; 2614 height: 16px; 2615 background-image: url(webtrees/images/indicator.gif); 2616} 2617 2618.icon-media { 2619 width: 20px; 2620 height: 20px; 2621 background-image: url(webtrees/images/media.png); 2622} 2623 2624.icon-media-list { 2625 width: 20px; 2626 height: 20px; 2627 background-image: url(webtrees/images/media.png); 2628} 2629 2630.icon-media-next { 2631 width: 20px; 2632 height: 20px; 2633 background-image: url(webtrees/images/rdarrow.png); 2634} 2635 2636.icon-media-play { 2637 width: 20px; 2638 height: 20px; 2639 background-image: url(webtrees/images/rarrow.png); 2640} 2641 2642.icon-media-stop { 2643 width: 20px; 2644 height: 20px; 2645 background-image: url(webtrees/images/stop.png); 2646} 2647 2648.icon-minus { 2649 width: 11px; 2650 height: 11px; 2651 background-image: url(webtrees/images/minus.png); 2652} 2653 2654.icon-mypage { 2655 width: 24px; 2656 height: 24px; 2657 background-image: url(webtrees/images/mypage.png); 2658} 2659 2660.icon-note { 2661 width: 20px; 2662 height: 20px; 2663 background-image: url(webtrees/icons/note.png); 2664} 2665 2666.icon-plus { 2667 width: 11px; 2668 height: 11px; 2669 background-image: url(webtrees/images/plus.png); 2670} 2671 2672.icon-remove { 2673 width: 20px; 2674 height: 20px; 2675 background-image: url(webtrees/images/remove.png); 2676} 2677 2678.icon-resn-confidential { 2679 width: 16px; 2680 height: 16px; 2681 background-image: url(webtrees/images/resn_confidential.png); 2682} 2683 2684.icon-resn-locked { 2685 width: 16px; 2686 height: 16px; 2687 background-image: url(webtrees/images/resn_locked.png); 2688} 2689 2690.icon-resn-none { 2691 width: 16px; 2692 height: 16px; 2693 background-image: url(webtrees/images/resn_none.png); 2694} 2695 2696.icon-resn-privacy { 2697 width: 16px; 2698 height: 16px; 2699 background-image: url(webtrees/images/resn_privacy.png); 2700} 2701 2702.icon-rings { 2703 width: 9px; 2704 height: 9px; 2705 background-image: url(webtrees/images/rings.png); 2706} 2707 2708.icon-selected { 2709 width: 12px; 2710 height: 12px; 2711 background-image: url(webtrees/images/selected.png); 2712} 2713 2714.icon-source { 2715 width: 20px; 2716 height: 20px; 2717 background-image: url(webtrees/images/source.png); 2718} 2719 2720/* Silhouettes on charts */ 2721.icon-silhouette-F { 2722 width: 37px; 2723 height: 50px; 2724 background-image: url(webtrees/images/silhouette_female_small.png); 2725} 2726 2727.icon-silhouette-M { 2728 width: 37px; 2729 height: 50px; 2730 background-image: url(webtrees/images/silhouette_male_small.png); 2731} 2732 2733.icon-silhouette-U { 2734 width: 37px; 2735 height: 50px; 2736 background-image: url(webtrees/images/silhouette_unknown_small.png); 2737} 2738 2739.icon-indis { 2740 width: 20px; 2741 height: 20px; 2742 background-image: url(webtrees/images/indis.png); 2743} 2744 2745.icon-patriarch { 2746 width: 20px; 2747 height: 20px; 2748 background-image: url(webtrees/images/patriarch.png); 2749} 2750 2751.icon-pedigree { 2752 width: 20px; 2753 height: 20px; 2754 background-image: url(webtrees/images/pedigree.png); 2755} 2756 2757.icon-place { 2758 width: 20px; 2759 height: 20px; 2760 background-image: url(webtrees/images/place.png); 2761} 2762 2763.icon-repo-list { 2764 width: 20px; 2765 height: 20px; 2766 background-image: url(webtrees/images/repository.png); 2767} 2768 2769.icon-repository { 2770 width: 20px; 2771 height: 20px; 2772 background-image: url(webtrees/images/repository.png); 2773} 2774 2775.icon-search { 2776 width: 17px; 2777 height: 17px; 2778 background-image: url(webtrees/images/search.png); 2779} 2780 2781.icon-sfamily { 2782 width: 20px; 2783 height: 20px; 2784 background-image: url(webtrees/images/family.png); 2785} 2786 2787.icon-source-list { 2788 width: 20px; 2789 height: 20px; 2790 background-image: url(webtrees/images/source.png); 2791} 2792 2793.icon-user_add { 2794 width: 20px; 2795 height: 20px; 2796 background-image: url(webtrees/images/user_add.png); 2797} 2798 2799/* Census assistant */ 2800.wt-census-assistant-form-control:focus { 2801 min-width: 12rem; 2802} 2803 2804/* 2805 * Drag and drop sortable lists 2806 */ 2807.wt-sortable-list { 2808} 2809 2810.wt-sortable-item { 2811 cursor: move; 2812} 2813 2814/* Some blocks show a reduced version on the right-hand side. */ 2815.wt-side-blocks .wt-side-block-optional { 2816 display: none !important; 2817} 2818 2819/* my page chart enhancements */ 2820.wt-block-content-charts { 2821 flex-flow: column-reverse; 2822 overflow: auto; 2823} 2824 2825.wt-block-content-todays-events-block { 2826 padding: .25rem; 2827} 2828 2829/* Some charts are wider than the page. */ 2830.wt-chart { 2831 overflow-x: auto; 2832 overflow-y: hidden; 2833} 2834 2835/* Fit thumbnail into parent on charts */ 2836.select2-selection.select2-selection--single { 2837 min-height: 36px; 2838 height: auto; 2839 padding: 2px 0; 2840} 2841 2842.select2-container .select2-selection--single .select2-selection__rendered { 2843 padding-left: 2px; 2844} 2845 2846.select2-selection--single .NAME { 2847 padding-left: 4px; 2848} 2849 2850/* 2851 * These selectors control how the short horizontal lines are positioned in the Charts 2852 * Optimized for Win10 and FF, Chrome and Edge browsers 2853 * Ancestors 2854 * Descendants 2855 * amily book 2856 * Hourglass chart 2857 * 2858 */ 2859 2860/* Ascentors */ 2861.wt-chart-ancestors .linea1 { 2862 margin-bottom: 4px; 2863} 2864 2865.wt-chart-ancestors .linea2 { 2866 margin-bottom: 7px; 2867} 2868 2869.wt-chart-ancestors .linea3 { 2870 margin-bottom: 4px; 2871} 2872 2873.wt-chart-ancestors .linea4 { 2874 margin-bottom: 7px; 2875} 2876 2877.wt-chart-ancestors .linea5 { 2878 vertical-align: top; 2879} 2880 2881/* Descendants */ 2882.wt-chart-descendants .lined1 { 2883 margin-bottom: 4px; 2884} 2885 2886.wt-chart-descendants .lined2 { 2887 margin-bottom: 7px; 2888} 2889 2890.wt-chart-descendants .lined3 { 2891 margin-bottom: 4px; 2892} 2893 2894.wt-chart-descendants .lined4 { 2895 margin-bottom: 7px; 2896} 2897 2898.wt-chart-descendants .linea5 { 2899 vertical-align: top; 2900} 2901 2902/* Family book */ 2903.linef1 { 2904 margin-bottom: 3px; 2905} 2906 2907.linef2 { 2908 margin-bottom: 3px; 2909} 2910 2911.linef3 { 2912 margin-bottom: 7px; 2913} 2914 2915/* Hourglass */ 2916.lineh1 { 2917 margin-bottom: 4px; 2918} 2919 2920.lineh2 { 2921 margin-bottom: 4px; 2922} 2923 2924.lineh3 { 2925 margin-bottom: 7px; 2926} 2927 2928/* 2929 * Pedigree chart 2930 * 2931 * wt-chart, wt-chart-pedigree 2932 */ 2933 2934#pedigree_chart { 2935 position: relative; 2936 margin: 20px auto; 2937} 2938 2939#pedigree_canvas { 2940 z-index: -1000; 2941} 2942 2943#childbox-pedigree { 2944 border: 1px solid; 2945 background-color: #fff; 2946} 2947 2948#pedigree-page #childbox-pedigree { 2949 border: 1px solid; 2950 background-color: #fff; 2951} 2952 2953#childbox-pedigree { 2954 padding: 5px; 2955 position: absolute; 2956 display: none; 2957 text-align: start; 2958 white-space: nowrap; 2959 left: auto; 2960 z-index: 9999; 2961} 2962 2963.wt-chart-pedigree, .wt-chart-hourglass { 2964 overflow-y: auto; 2965} 2966 2967.wt-chart-pedigree .spacer { 2968 background-image: url(images/spacer.png); 2969 height: 20px; 2970 width: 1px; 2971} 2972 2973#pedigree-page .shadow { 2974 box-shadow: 0 0 0 !important; /* override vendor css shadow */ 2975} 2976 2977#childarrow, 2978.ancestorarrow { 2979 text-align: center; 2980 display: inline-block; 2981 vertical-align: middle; 2982} 2983 2984.layout3 #childbox-pedigree { 2985 top: auto; 2986} 2987 2988#childbox-pedigree a.name1 { 2989 display: block; 2990 margin-left: 5px; 2991} 2992 2993/* 2994 * Place hierarchy 2995 * 2996 * wt-place-hierarchy-page 2997 */ 2998 2999#place-hierarchy ul { 3000 list-style-type: none; 3001} 3002 3003.d-table-cell { 3004 padding-right: 5px; 3005} 3006 3007/* 3008 * Search 3009 * 3010 * wt-search-page, wt-general-serach-page/wt-phonetic-search-page/wt-advanced-search-page/wt-search-replace-page 3011 */ 3012 3013/* Some menus (e.g. languages) can be longer than a page */ 3014.dropdown-menu { 3015 max-height: 30rem; 3016 overflow-x: hidden; 3017} 3018 3019/* Clipping cart */ 3020.clipping-cart h2 { 3021 margin: 20px; 3022 text-align: center; 3023} 3024 3025.clipping-cart .wt-page-options { 3026 max-width: 25rem; 3027} 3028 3029.clipping-cart .topbottombar, .clipping-cart .optionbox, .add-to .topbottombar { 3030 font-size: 1rem; 3031} 3032 3033.clipping-cart .add-to { 3034 text-align: left; 3035} 3036 3037/* Forms */ 3038.col-form-label { 3039 font-weight: bold; 3040} 3041 3042/* Popups */ 3043.popup .nav-link { 3044 display: inline; 3045 vertical-align: top; 3046 padding: 5px; 3047} 3048 3049
