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