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