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