1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2020 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 19/* Colors for chart boxes, etc. */ 20:root { 21 --sex-f-fg: #ff2080; 22 --sex-m-fg: #81a9cb; 23 --sex-u-fg: #81a9cb; 24 --sex-f-bg: #e9daf1; 25 --sex-m-bg: #edf7fd; 26 --sex-u-bg: #ffffff; 27 --chart-line: solid gray thin; 28 --chart-line-radius: 1rem; 29} 30 31/* Override Bootstrap formatting */ 32.btn-link { 33 padding-left: 0.25rem; 34 padding-right: 0.25rem; 35} 36 37.table-given-name { 38 overflow-x: hidden; 39} 40 41.container-fluid { 42 padding-left: 5px; 43 padding-right: 5px; 44} 45 46table { 47 border-collapse: separate; 48} 49 50/* 51 * Pages have the following high-level structure: 52 * 53 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 54 * +---wt-header-wrapper 55 * | +---wt-header-container 56 * | +---wt-header-content 57 * | +---wt-accessibility-links 58 * | +---wt-site-logo 59 * | +---wt-site-title 60 * | +---wt-header-search 61 * | | +---wt-header-search-form 62 * | | +---wt-header-search-field 63 * | | +---wt-header-search-button 64 * | +---wt-secondary-navigation 65 * | | +---wt-user-menu 66 * | +---wt-primary-navigation 67 * | +---wt-genealogy-menu 68 * +---wt-main-wrapper 69 * | +---wt-main-container 70 * | +---wt-main-content 71 * | +---wt-messages 72 * | +---wt-page-title 73 * | +---wt-page-options wt-page-options-xxxxx 74 * | +---wt-page-content 75 * +---wt-footers 76 * +---wt-footer wt-footer-xxxxx 77 */ 78 79.wt-global { 80 color: #555; 81} 82 83.wt-header-wrapper { 84} 85 86.wt-header-container { 87} 88 89.wt-header-content { 90} 91 92.wt-accessibility-links { 93} 94 95.wt-site-logo { 96 order: 1; 97 flex: 0 0 272px; 98} 99 100.wt-site-logo:after { 101 height: 50px; 102 width: 242px; 103 content: url(webtrees/images/webtrees.png); 104} 105 106.wt-site-title { 107 order: 3; 108 flex: 0 0 calc(100% - 15rem); 109 font-size: 1.5rem; 110 font-weight: normal; 111} 112 113.wt-header-search { 114 order: 4; 115 flex: 0 0 15rem; 116 position: relative; 117 top: -0.75rem; 118} 119 120.wt-header-search-form { 121} 122 123.wt-header-search-field { 124} 125 126.wt-header-search-button { 127} 128 129.wt-secondary-navigation { 130 order: 2; 131 flex: 1 0 auto; 132 width: auto; 133 white-space: nowrap; 134 margin-bottom: 15px; 135} 136 137.wt-user-menu { 138 flex-wrap: nowrap; 139 justify-content: flex-end; 140} 141 142.wt-user-menu .nav-link { 143 display: inline-block; 144 padding: 0.5rem; 145} 146 147.wt-user-menu .nav-item + .nav-item::before { 148 content: "|"; 149} 150 151.wt-user-menu .dropdown-toggle::after { 152 display: none; 153} 154 155.wt-primary-navigation { 156 order: 5; 157 /* Extend to full page width */ 158 flex: 0 0 100vw; 159 max-width: 100vw; 160 /* Recalculate margins for content */ 161 margin: 0 calc(50% - 50vw); 162 padding: 0 calc(50vw - 50%); 163 border-bottom: 2px solid #81a9cb; 164 border-top: 2px solid #81a9cb; 165} 166 167.wt-genealogy-menu { 168 justify-content: center; 169} 170 171.wt-genealogy-menu .nav-item { 172 text-align: center; 173 min-width: 5rem; 174} 175 176.wt-genealogy-menu .nav-link::before { 177 display: block; 178} 179 180.wt-genealogy-menu .dropdown-toggle::after { 181 display: none; 182} 183 184.wt-genealogy-menu .dropdown-menu { 185 border-radius: 0; 186 border: thin solid #aaa; 187} 188 189.wt-genealogy-menu .dropdown-item { 190 /* Space between icons and align with submenu icons */ 191 padding: 0 5px 0 0; 192 line-height: 1.0; 193} 194 195.wt-genealogy-menu .dropdown-item::before { 196 vertical-align: text-top; 197 line-height: 2.4; 198 padding: 0 .25rem; 199} 200 201.menu-tree .nav-link::before { 202 content: url(webtrees/menu/tree.png); 203} 204 205.menu-tree .dropdown-item::before { 206 content: url(webtrees/menu/tree-tree.png); 207} 208 209.menu-chart .nav-link::before { 210 content: url(webtrees/menu/chart.png); 211} 212 213.menu-chart-ancestry::before { 214 content: url(webtrees/menu/chart-ancestors.png); 215} 216 217.menu-chart-compact::before { 218 content: url(webtrees/menu/chart-compact.png); 219} 220 221.menu-chart-descendants::before { 222 content: url(webtrees/menu/chart-descendants.png); 223} 224 225.menu-chart-familybook::before { 226 content: url(webtrees/menu/chart-family-book.png); 227} 228 229.menu-chart-fanchart::before { 230 content: url(webtrees/menu/chart-fanchart.png); 231} 232 233.menu-chart-hourglass::before { 234 content: url(webtrees/menu/chart-hourglass.png); 235} 236 237.menu-chart-lifespan::before { 238 content: url(webtrees/menu/chart-lifespan.png); 239} 240 241.menu-chart-pedigree::before { 242 content: url(webtrees/menu/chart-pedigree.png); 243} 244 245.menu-chart-pedigreemap::before { 246 content: url(webtrees/menu/chart-pedigree-map.png); 247} 248 249.menu-chart-relationship::before { 250 content: url(webtrees/menu/chart-relationship.png); 251} 252 253.menu-chart-statistics::before { 254 content: url(webtrees/menu/chart-statistics.png); 255} 256 257.menu-chart-timeline::before { 258 content: url(webtrees/menu/chart-timeline.png); 259} 260 261.menu-chart-tree::before { 262 content: url(webtrees/menu/chart-tree.png); 263} 264 265.menu-list .nav-link::before { 266 content: url(webtrees/menu/list.png); 267} 268 269.menu-branches::before { 270 content: url(webtrees/menu/branches.png); 271} 272 273.menu-list-fam::before { 274 content: url(webtrees/menu/list-fam.png); 275} 276 277.menu-list-indi::before { 278 content: url(webtrees/menu/list-indi.png); 279} 280 281.menu-list-note::before { 282 content: url(webtrees/menu/list-note.png); 283} 284 285.menu-list-obje::before { 286 content: url(webtrees/menu/list-obje.png); 287} 288 289.menu-list-plac::before { 290 content: url(webtrees/menu/list-plac.png); 291} 292 293.menu-list-repo::before { 294 content: url(webtrees/menu/list-repo.png); 295} 296 297.menu-list-sour::before { 298 content: url(webtrees/menu/list-sour.png); 299} 300 301.menu-list-subm::before { 302 content: url(webtrees/menu/list-indi.png); 303} 304 305.menu-calendar .nav-link::before { 306 content: url(webtrees/menu/calendar.png); 307} 308 309.menu-calendar-day::before { 310 content: url(webtrees/menu/calendar-calendar.png); 311} 312 313.menu-calendar-month::before { 314 content: url(webtrees/menu/calendar-calendar.png); 315} 316 317.menu-calendar-year::before { 318 content: url(webtrees/menu/calendar-calendar.png); 319} 320 321.menu-report .nav-link::before { 322 content: url(webtrees/menu/report.png); 323} 324 325.menu-report .dropdown-item::before { 326 content: url(webtrees/menu/report-report.png); 327} 328 329.menu-search .nav-link::before { 330 content: url(webtrees/menu/search.png); 331} 332 333.menu-search .dropdown-item::before { 334 content: url(webtrees/menu/search-search.png); 335} 336 337.menu-faq .nav-link::before { 338 content: url(webtrees/menu/faq.png); 339} 340 341.menu-clippings .nav-link::before { 342 content: url(webtrees/menu/clippings.png); 343} 344 345.menu-clippings-add::before { 346 content: url(webtrees/menu/clippings-add.png); 347} 348 349.menu-clippings-cart::before { 350 content: url(webtrees/menu/clippings-cart.png); 351} 352 353.menu-clippings-download::before { 354 content: url(webtrees/menu/edit-preferences.png); 355} 356 357.menu-clippings-empty::before { 358 content: url(webtrees/menu/edit-delete.png); 359} 360 361.menu-story .nav-link::before { 362 content: url(webtrees/menu/story.png); 363} 364 365.wt-main-container { 366 /* Space between the header/footer and the main content. */ 367 padding-top: 1rem; 368 padding-bottom: 1rem; 369} 370 371.wt-main { 372} 373 374.wt-messages { 375} 376 377.wt-page-title { 378 color: #006; 379 font-size: 1.5rem; 380 font-weight: bold; 381 text-align: center; 382} 383 384.wt-page-options { 385} 386 387.wt-page-content { 388} 389 390.wt-page-options .form-group { 391 margin-bottom: 2px; 392} 393 394.wt-page-options-label { 395 color: #fff; 396 background-color: #81a9cb; 397 font-weight: bold; 398 border-left: 2px solid transparent; 399 border-right: 2px solid transparent; 400} 401 402.wt-page-options-value { 403 background-color: #edf7f9; 404 border: solid #81a9cb 1px; 405 padding: 0.25rem 0.75rem; 406} 407 408.wt-page-content { 409 margin-top: 1rem; 410} 411 412.wt-footers { 413} 414 415.wt-footer { 416} 417 418.wt-footer-contact { 419} 420 421.wt-footer-cookies { 422 background: #aaa; 423 color: #fff; 424 transition: height 0.5s; 425} 426 427.wt-footer-page-views { 428} 429 430.wt-footer-powered-by { 431} 432 433.wt-footer-powered-by-webtrees { 434 width: 100px; 435 height: 21px; 436 content: url(images/powered-by-webtrees.png); 437} 438 439/* 440 * The tree/user home pages 441 * 442 * wt-home-page / wt-user-page 443 * +---wt-main-blocks 444 * | +---wt-block, wt-block-AAA 445 * | +---wt-block, wt-block-BBB 446 * | +---wt-block, wt-block-CCC 447 * +---wt-side-blocks 448 * +---wt-block, wt-block-XXX 449 * +---wt-block, wt-block-YYY 450 * +---wt-block, wt-block-ZZZ 451 * 452 * Each block as the structure 453 * wt-block, wt-block-XXX 454 * +---wt-block-header, wt-block-header-XXX 455 * +---wt-block-content, wt-block-content-XXX 456 */ 457 458.wt-block { 459 background-color: #edf7fd; 460 border: solid #81a9cb 1px; 461} 462 463.wt-block-header { 464 background-color: #edf7fd; 465 border-bottom: none; 466 font-weight: bold; 467} 468 469.wt-block-content { 470} 471 472.wt-block-content .list_table { 473 border-spacing: 1px; 474 border: solid #81a9cb 1px; 475 border-right: 0; 476} 477 478.wt-block-content .list_value, 479.wt-block-content .list_value_wrap { 480 border: 0; 481 border-top: solid #81a9cb 1px; 482 border-right: solid #81a9cb 1px; 483} 484 485/* 486 * The individual page. 487 * 488 * wt-route-individual 489 * +---wt-header-wrapper 490 */ 491 492.wt-individual-silhouette { 493 content: url(images/individual-silhouette-unknown.png); 494} 495 496.wt-individual-silhouette-f { 497 content: url(images/individual-silhouette-female.png); 498} 499 500.wt-individual-silhouette-m { 501 content: url(images/individual-silhouette-male.png); 502} 503 504/* 505 * Chart-boxes are used to build the various charts. 506 * Each type of chart will set its own size and hide/show content. 507 * 508 * wt-chart-box 509 * +--- wt-chart-box-thumbnail 510 * +--- wt-chart-box-extra 511 * +--- wt-chart-box-zoom 512 * +--- wt-chart-box-icon 513 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 514 * +--- wt-chart-box-links 515 * +--- wt-chart-box-icon 516 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 517 * +--- wt-chart-box-name 518 * +--- wt-chart-box-lifespan 519 * +--- wt-chart-box-facts 520 * +--- wt-chart-box-fact 521 */ 522.wt-chart-box, 523.wt-chart-box-menu { 524 background: var(--sex-u-bg); 525 border: dashed var(--sex-u-fg) thin; 526} 527 528.wt-chart-box { 529 height: 5rem; 530 padding: 2px; 531 line-height: 1.1; 532} 533 534.wt-chart-box-f, 535.wt-chart-box-f .wt-chart-box-dropdown { 536 background: var(--sex-f-bg); 537 border: solid var(--sex-f-fg) thin; 538} 539 540.wt-chart-box-m, 541.wt-chart-box-m .wt-chart-box-dropdown { 542 background: var(--sex-m-bg); 543 border: solid var(--sex-m-fg) thin; 544} 545 546a { 547 color: #555; 548 text-decoration: none; 549} 550 551a:hover { 552 color: #f00; 553 text-decoration: none; 554} 555 556:focus { 557 outline-style: none; 558} 559 560.flash-messages { 561 clear: both; 562 text-align: center; 563} 564 565img { 566 border: 0; 567} 568 569legend img { 570 height: 20px; 571 vertical-align: middle; 572 width: 20px; 573} 574 575img.block { 576 border: 0; 577 height: 25px; 578 vertical-align: middle; 579} 580 581.topbottombar { 582 background-color: #81a9cb; 583 color: #fff; 584 font-weight: bold; 585 padding: 4px; 586 text-align: center; 587} 588 589.button { 590 width: 60px; 591} 592 593.alpha_index { 594 color: #999; 595} 596 597.news_box:target, 598#gedcom_stats:target { 599 background-color: #ffc; 600} 601 602/* families tab person box */ 603table.center { 604 margin-left: auto; 605 margin-right: auto; 606} 607 608.list_table { 609 margin: 0 auto; 610} 611 612.list_label, 613.list_label_wrap { 614 color: #fff; 615 background-color: #81a9cb; 616 font-weight: bold; 617 text-align: center; 618} 619 620.list_value, 621.list_value_wrap { 622 background-color: #edf7f9; 623 border: solid #81a9cb 1px; 624 vertical-align: top; 625 padding: 4px; 626} 627 628.list_label, 629.list_value { 630 white-space: nowrap; 631} 632 633.list_label_wrap, 634.list_value_wrap { 635 white-space: normal; 636} 637 638div.fact_SHARED_NOTE { 639 clear: both; 640} 641 642/* Table of genealogical facts */ 643.wt-facts-table caption { 644 caption-side: top; 645} 646 647.wt-facts-table th { 648 background-color: #81a9cb; 649 border: solid #81a9cb 1px; 650 text-align: center; 651 font-weight: normal; 652 min-width: 20%; 653} 654 655.wt-facts-table td { 656 background-color: #edf7fd; 657 border: solid #81a9cb 1px; 658} 659 660.wt-facts-table .wt-gender-M td { 661 background-color: #edf7fd; 662 border-color: #81a9cb; 663} 664 665.wt-facts-table .wt-gender-F td { 666 background-color: #e9daf1; 667 border-color: #ff2080; 668} 669 670.name1 { 671 font-weight: bold; 672 font-size: 12px; 673} 674 675.name2 { 676 font-size: 16px; 677} 678 679a:hover .name1, a:hover .name2 { 680 color: #f00; 681 font-weight: bold; 682 font-size: 12px; 683} 684 685.details_label { 686 font-weight: bold; 687} 688 689.date { 690 color: #337; 691} 692 693.label { 694 font-weight: bold; 695} 696 697.error { 698 color: #d00; 699 font-weight: bold; 700} 701 702.largeError { 703 color: #d00; 704 font-size: large; 705 font-weight: bold; 706} 707 708.warning { 709 color: #f00; 710 font-weight: bold; 711} 712 713.indent { 714 padding-left: 20px; 715} 716 717.thumbnail { 718 height: auto; 719 padding: 3px; 720} 721 722.icon { 723 border: 0; 724 padding: 0 5px; 725} 726 727.subheaders { 728 font-weight: bold; 729 font-size: 15px; 730 margin-top: 15px; 731 vertical-align: bottom; 732} 733 734.parentdeath { 735 border: thin solid #888; 736 padding: 1px; 737} 738 739.selected-option { 740 background-color: #edf7fd; 741} 742 743.border1 { 744 border: solid #000 1px; 745} 746 747.journal_box { 748 padding: 3pt; 749 border: thin solid #aaa; 750 overflow: visible; 751} 752 753.news_box { 754 background-color: #edf7fd; 755 border-top: solid #81a9cb 1px; 756} 757 758.news_title { 759 font-weight: bold; 760} 761 762.news_date { 763 margin-bottom: 12px; 764} 765 766.current_day { 767 font-weight: bold; 768 font-size: 16px; 769} 770 771.cal_day { 772 font-weight: bold; 773} 774 775.rtl_cal_day { 776 color: #00f; 777 font-weight: bold; 778} 779 780#user-page h1 { 781 margin: 0.25em auto 0.6em; 782} 783 784.tvertline { 785 vertical-align: bottom; 786} 787 788#childbox { 789 padding: 5px; 790 position: absolute; 791 display: none; 792 text-align: start; 793 white-space: nowrap; 794 top: 20px; 795 left: 0; 796} 797 798.layout3 #childbox { 799 top: auto; 800 bottom: 20px; 801} 802 803#childbox a.name1 { 804 display: block; 805 margin-left: 5px; 806} 807 808.person0 { 809 background-color: #aaf; 810 border: outset #aaf 1px; 811 vertical-align: top; 812} 813 814.person1 { 815 background-color: #afa; 816 border: outset #afa 1px; 817 vertical-align: top; 818} 819 820.person2 { 821 background-color: #faa; 822 border: outset #faa 1px; 823 vertical-align: top; 824} 825 826.person3 { 827 background-color: #55f; 828 border: outset #55f 1px; 829 vertical-align: top; 830} 831 832.person4 { 833 background-color: #f55; 834 border: outset #f55 1px; 835 vertical-align: top; 836} 837 838.person5 { 839 background-color: #5f5; 840 border: outset #5f5 1px; 841 vertical-align: top; 842} 843 844.starredname { 845 text-decoration: underline; 846} 847 848.search_hit { 849 background-color: #ff0; 850} 851 852.descriptionbox { 853 color: #fff; 854 font-size: 12px; 855 background-color: #81a9cb; 856 border: solid #81a9cb 1px; 857 vertical-align: top; 858 padding: 3px; 859} 860 861.optionbox { 862 background-color: #d1d9ef; 863 font-size: 1rem; 864 border: solid #81a9cb 1px; 865 vertical-align: top; 866 white-space: nowrap; 867 padding: 3px; 868} 869 870.red { 871 color: #f00; 872} 873 874.wt-relation-fact, 875.wt-historic-fact { 876 opacity: 0.8; 877} 878 879.messagebox { 880 background-color: #c2ceef; 881 border: solid #81a9cb 1px; 882} 883 884/* ---Pending edits--- */ 885.wt-new { 886 outline: solid blue 1px; 887} 888 889.wt-old { 890 outline: solid red 1px; 891} 892 893.tag_cloud { 894 text-align: center; 895} 896 897.tag_cloud a { 898 white-space: nowrap; 899} 900 901.nowrap { 902 white-space: nowrap; 903} 904 905.wrap { 906 white-space: normal; 907} 908 909.statistics-page { 910 text-align: center; 911} 912 913.gchart { 914 border: solid #81a9cb 1px; 915} 916 917#facts_content dd { 918 float: left; 919 width: 70%; 920} 921 922td.descriptionbox a { 923 color: #fff; 924} 925 926/* this keeps the tag color the same when it is a link as when not */ 927 928.place { 929 padding-top: 5px; 930} 931 932.filtersH, 933.filtersF { 934 margin: 4px; 935} 936 937.filtersH img { 938 margin-bottom: 2px; 939} 940 941.list-charts { 942 text-align: center; 943} 944 945#place-hierarchy h2, 946#place-hierarchy h4 { 947 text-align: center; 948} 949 950/* ==== FAQ table styles ===== */ 951table.faq { 952 background-color: #e0e0e0; 953 margin: 5px 0 50px 5px; 954 width: 98%; 955} 956 957table.faq tr:nth-child(odd) td { 958 background-color: #e7eef3; 959} 960 961div.faq_title { 962 background-color: #e0e0e0; 963 margin: 1em 0; 964 padding: .25em; 965 font-weight: bold; 966 width: 98%; 967} 968 969div.faq_body { 970 clear: both; 971 padding: 0 1em; 972} 973 974.faq_top { 975 float: right; 976} 977 978/* === Positioning edit, copy, delete links === */ 979/* General use */ 980.editfacts { 981 clear: left; 982 padding-top: 15px; 983} 984 985#indi_note { 986 margin: 0 0 5px; 987} 988 989.indi_table { 990 clear: left; 991} 992 993#indi_note .fact_NOTE { 994 float: left; 995 margin: 0 5px 0 0; 996} 997 998#indi_note .fact_SOUR { 999 margin: 3px 0; 1000} 1001 1002#indi_note .fact_SOUR a { 1003 font-size: 100%; 1004} 1005 1006#indi_note .fact_NOTE, 1007#indi_note .fact_SOUR { 1008 clear: both; 1009} 1010 1011.odometer { 1012 font-family: courier, monospace; 1013 font-weight: bold; 1014 background: #000; 1015 color: #fff; 1016} 1017 1018/* Sidebar - Family navigator */ 1019.wt-family-navigator-dropdown { 1020 background: #edf7fd; 1021} 1022 1023.wt-family-navigator-dropdown-heading { 1024 font-weight: bold; 1025 font-size: inherit; 1026 color: inherit; 1027} 1028 1029/* Sidebar - Descendants */ 1030#sb_content_descendancy { 1031 margin-top: 5px; 1032} 1033 1034#sb_desc_content { 1035 margin-left: 3px; 1036 font-size: 0.8em; 1037} 1038 1039#sb_desc_content ul { 1040 padding: 0; 1041 margin: 0; 1042} 1043 1044.sb_desc_indi_li { 1045 list-style-type: none; 1046} 1047 1048/* Individuals and Families */ 1049#sidebar-content-individuals, 1050#sidebar-content-families { 1051 margin-top: 5px; 1052} 1053 1054.sb_indi_surname_li, 1055.sb_fam_surname_li { 1056 list-style-image: url(icons/plus.png); 1057} 1058 1059.name_tree_div ul { 1060 padding: 0; 1061 margin: 0; 1062} 1063 1064.name_tree_div li { 1065 list-style: none; 1066 margin: 0; 1067 padding: 0; 1068} 1069 1070/* Clippings */ 1071#sb_clippings_content ul { 1072 padding: 0; 1073 margin: 0; 1074} 1075 1076#sb_clippings_content li { 1077 list-style: none; 1078 margin: 0; 1079 padding: 0; 1080 white-space: nowrap; 1081} 1082 1083/* Stories module */ 1084.story_title { 1085 padding-top: 12px; 1086 font-size: 13px; 1087 height: 32px; 1088 font-weight: bold; 1089} 1090 1091.story_body { 1092 padding: 20px; 1093 white-space: normal; 1094} 1095 1096.story_edit { 1097 padding: 12px; 1098} 1099 1100/*-- Fan chart ---- */ 1101.fan_chart_menu { 1102 background: #fff; 1103 position: absolute; 1104 display: none; 1105 z-index: 100; 1106} 1107 1108#fan_chart ul { 1109 list-style-type: none; 1110 margin: 0; 1111} 1112 1113/* Lifespans chart */ 1114.wt-lifespans-subtitle { 1115 text-align: center; 1116} 1117 1118.wt-lifespans-scale { 1119 white-space: nowrap; 1120} 1121 1122.wt-lifespans-decade { 1123 width: 70px; 1124 height: 60px; 1125 display: inline-block; 1126 background-image: url(images/lifespan-decade.png); 1127 background-position-y: bottom; 1128 background-repeat: no-repeat; 1129 background-size: 70px 37px; 1130} 1131 1132.wt-lifespans-individuals { 1133 background: #fafafa; 1134} 1135 1136.wt-lifespans-individual { 1137 1138} 1139 1140.wt-lifespans-summary { 1141 background: #ffffff; 1142 border: thin solid #000; 1143 z-index: 1; 1144} 1145 1146.wt-lifespans-summary-link { 1147 font-weight: bold; 1148} 1149 1150/*-- timeline --*/ 1151#timeline_chart { 1152 position: relative; 1153 top: 0; 1154 left: 0; 1155} 1156 1157/* 1158 * Any element that is loaded dynamically has the class wt-ajax-load. 1159 * We can provide a "loading" placeholder for empty elements with this class. 1160 */ 1161.wt-ajax-load:empty { 1162 height: 32px; 1163 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 1164} 1165 1166/* 1167 * Default icons are provided by FontAwesome. 1168 */ 1169.wt-icon-anniversary { 1170 content: url(icons/anniversary.png); 1171} 1172 1173.wt-icon-arrow-down { 1174 content: url(webtrees/icons/arrow-down.png); 1175} 1176 1177a > .wt-icon-arrow-down:hover { 1178 content: url(webtrees/icons/arrow-down-hover.png); 1179} 1180 1181.wt-icon-arrow-left { 1182 content: url(webtrees/icons/arrow-left.png); 1183} 1184 1185a > .wt-icon-arrow-left:hover { 1186 content: url(webtrees/icons/arrow-left-hover.png); 1187} 1188 1189.wt-icon-arrow-right { 1190 content: url(webtrees/icons/arrow-right.png); 1191} 1192 1193a > .wt-icon-arrow-right:hover { 1194 content: url(webtrees/icons/arrow-right-hover.png); 1195} 1196 1197.wt-icon-arrow-up { 1198 content: url(webtrees/icons/arrow-up.png); 1199} 1200 1201a > .wt-icon-arrow-up:hover { 1202 content: url(webtrees/icons/arrow-up-hover.png); 1203} 1204 1205.wt-icon-bing-maps { 1206 content: url(icons/bing-maps.png); 1207} 1208 1209.wt-icon-calendar { 1210 content: url(icons/calendar.png) 1211} 1212 1213.wt-icon-collapse { 1214} 1215 1216.wt-icon-coordinates { 1217 content: url(icons/coordinates.png) 1218} 1219 1220.wt-icon-copy { 1221 content: url(icons/copy.png) 1222} 1223 1224.wt-icon-delete { 1225 content: url(icons/delete.png); 1226} 1227 1228.wt-icon-edit { 1229 content: url(icons/edit.png); 1230} 1231 1232.wt-icon-expand { 1233} 1234 1235.wt-icon-family { 1236 content: url(icons/family.png); 1237} 1238 1239.wt-icon-google-maps { 1240 content: url(icons/google-maps.png); 1241} 1242 1243.wt-icon-help { 1244 content: url(webtrees/icons/help.png); 1245} 1246 1247.wt-icon-individual { 1248 content: url(icons/individual.png); 1249} 1250 1251.wt-icon-keyboard { 1252 content: url(icons/keyboard.png); 1253} 1254 1255.wt-icon-media { 1256 content: url(icons/media.png); 1257} 1258 1259.wt-icon-note { 1260 content: url(icons/note.png); 1261} 1262 1263.wt-icon-openstreetmap { 1264 content: url(icons/openstreetmap.png); 1265} 1266 1267.wt-icon-preferences { 1268 content: url(webtrees/icons/preferences.png); 1269} 1270 1271.wt-icon-reorder { 1272 content: url(icons/reorder.png); 1273} 1274 1275.wt-icon-repository { 1276 content: url(icons/repository.png); 1277} 1278 1279.wt-icon-sex { 1280 height: 1em; 1281} 1282 1283.wt-icon-sex-f { 1284 content: url(icons/sex-female.png); 1285} 1286 1287.wt-icon-sex-m { 1288 content: url(icons/sex-male.png); 1289} 1290 1291.wt-icon-sex-u { 1292 content: url(icons/sex-unknown.png); 1293} 1294 1295.wt-icon-sex-x { 1296 content: url(icons/sex-unknown.png); 1297} 1298 1299.wt-icon-source { 1300 content: url(icons/source.png); 1301} 1302 1303.wt-icon-submitter { 1304 content: url(icons/individual.png); 1305} 1306 1307.wt-icon-warning { 1308 content: url(icons/warning.png); 1309} 1310 1311.wt-icon-zoom-in { 1312 content: url(webtrees/icons/zoom-in.png); 1313} 1314 1315.wt-icon-zoom-out { 1316 content: url(webtrees/icons/zoom-out.png); 1317} 1318 1319/* Miscellaneous images */ 1320.icon-cfamily { 1321 content: url(webtrees/images/family.png); 1322} 1323 1324.icon-childless { 1325 content: url(images/childless.png); 1326} 1327 1328.icon-children { 1329 content: url(images/children.png); 1330} 1331 1332.icon-edit_indi { 1333 content: url(webtrees/images/edit_indi.png); 1334} 1335 1336.icon-fam-list { 1337 content: url(webtrees/images/family.png); 1338} 1339 1340.icon-indi-list { 1341 content: url(webtrees/images/indis.png); 1342} 1343 1344.icon-loading-small { 1345 content: url(images/indicator.gif); 1346} 1347 1348.icon-minus { 1349 content: url(icons/minus.png); 1350} 1351 1352.icon-mypage { 1353 content: url(webtrees/images/mypage.png); 1354} 1355 1356.icon-plus { 1357 content: url(icons/plus.png); 1358} 1359 1360.icon-resn-confidential { 1361 content: url(images/resn_confidential.png); 1362} 1363 1364.icon-resn-locked { 1365 content: url(images/resn_locked.png); 1366} 1367 1368.icon-resn-none { 1369 content: url(images/resn_none.png); 1370} 1371 1372.icon-resn-privacy { 1373 content: url(images/resn_privacy.png); 1374} 1375 1376.icon-rings { 1377 content: url(images/rings.png); 1378} 1379 1380.icon-selected { 1381 content: url(webtrees/images/selected.png); 1382} 1383 1384/* Silhouettes on charts */ 1385.icon-silhouette-F { 1386 content: url(webtrees/images/silhouette_female_small.png); 1387} 1388 1389.icon-silhouette-M { 1390 content: url(webtrees/images/silhouette_male_small.png); 1391} 1392 1393.icon-silhouette-U { 1394 content: url(webtrees/images/silhouette_unknown_small.png); 1395} 1396 1397.icon-indis { 1398 content: url(webtrees/images/indis.png); 1399} 1400 1401.icon-patriarch { 1402 content: url(webtrees/images/patriarch.png); 1403} 1404 1405.icon-pedigree { 1406 content: url(webtrees/images/pedigree.png); 1407} 1408 1409.icon-sfamily { 1410 content: url(webtrees/images/family.png); 1411} 1412 1413.icon-user_add { 1414 content: url(webtrees/images/user_add.png); 1415} 1416 1417/* Census assistant */ 1418.wt-census-assistant-form-control:focus { 1419 min-width: 12rem; 1420} 1421 1422/* Some blocks show a reduced version on the right-hand side. */ 1423.wt-side-blocks .wt-side-block-optional { 1424 display: none !important; 1425} 1426 1427/* my page chart enhancements */ 1428.wt-block-content-charts { 1429 overflow: auto; 1430} 1431 1432/* Some charts are wider than the page. */ 1433.wt-chart { 1434 overflow-x: auto; 1435 overflow-y: hidden; 1436} 1437 1438/* Fit thumbnail into parent on charts */ 1439.select2-selection.select2-selection--single { 1440 min-height: 36px; 1441 height: auto; 1442 padding: 2px 0; 1443} 1444 1445.select2-container .select2-selection--single .select2-selection__rendered { 1446 padding-left: 2px; 1447} 1448 1449.select2-selection--single .NAME { 1450 padding-left: 4px; 1451} 1452 1453/* Some menus (e.g. languages) can be longer than a page */ 1454.dropdown-menu { 1455 max-height: 30rem; 1456 overflow-x: hidden; 1457} 1458 1459/* Forms */ 1460.col-form-label { 1461 font-weight: bold; 1462} 1463