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