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