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 border: 0; 552 height: 25px; 553 vertical-align: middle; 554} 555 556.topbottombar { 557 color: #fff; 558 font-size: 12px; 559 font-weight: bold; 560 padding: 4px; 561 text-align: center; 562} 563 564.button { 565 width: 60px; 566} 567 568.btn-primary.focus, .btn-primary:focus { 569 box-shadow:none; 570 border: 0; 571} 572 573.alpha_index { 574 color: #999; 575} 576 577hr { 578 margin-top: 5px; 579} 580 581table.center { 582 margin-left: auto; 583 margin-right: auto; 584} 585 586.list_table { 587 margin: 0 auto; 588} 589 590.list_label, 591.list_label_wrap { 592 color: #fff; 593 background-color: #81a9cb; 594 border: 1px solid #ddd; 595 font-weight: bold; 596 text-align: center; 597} 598 599.list_value, 600.list_value_wrap { 601 background-color: #edf7f9; 602 border: solid #ddd 1px; 603 vertical-align: top; 604 padding: 4px; 605} 606 607.list_label, 608.list_value { 609 white-space: nowrap; 610} 611 612.list_label_wrap, 613.list_value_wrap { 614 white-space: normal; 615} 616 617div.fact_SHARED_NOTE { 618 clear: both; 619} 620 621/* Table of genealogical facts */ 622.wt-facts-table { 623 border-collapse: separate; 624} 625 626.wt-facts-table caption { 627 caption-side: top; 628} 629 630.wt-facts-table th { 631 border: 1px solid #ccc; 632 border-radius: 3px; 633 text-align: center; 634 min-width: 20%; 635} 636 637.wt-facts-table td { 638 border: solid #999 1px; 639 border-radius: 3px; 640} 641 642.wt-facts-table .wt-gender-M td { 643 background-color: #ddf; 644} 645 646.wt-facts-table .wt-gender-F td { 647 background-color: #fdd; 648} 649 650.name1 { 651} 652 653.name2 { 654} 655 656a:hover .name1, a:hover .name2 { 657 color: #f00; 658 font-weight: bold; 659 font-size: 12px; 660} 661 662.details2 { 663 font-size: 12px; 664} 665 666.details_label { 667 font-weight: bold; 668} 669 670.date { 671 color: #333; 672} 673 674.label { 675 font-weight: bold; 676} 677 678.error { 679 font-weight: bold; 680} 681 682.largeError { 683 color: #d00; 684 font-size: large; 685 font-weight: bold; 686} 687 688.warning { 689 color: #f00; 690 font-weight: bold; 691} 692 693.indent { 694 padding-left: 7px; 695} 696 697.thumbnail { 698 height: auto; 699 padding: 3px; 700} 701 702.icon { 703 border: 0; 704 padding: 0 5px; 705} 706 707.subheaders { 708 font-weight: bold; 709 font-size: 15px; 710 margin-top: 15px; 711 vertical-align: bottom; 712} 713 714.parentdeath { 715 border: thin solid #888; 716 padding: 1px; 717} 718 719.source_citations { 720 display: none; 721} 722 723.selected-option { 724 background-color: #edf7fd; 725} 726 727.border1 { 728 border: solid #000 1px; 729} 730 731.journal_box { 732 padding: 3pt; 733 border: thin solid #aaa; 734 overflow: visible; 735} 736 737.news_box { 738 border-top: solid #ccc 1px; 739} 740 741.news_title { 742 font-weight: bold; 743} 744 745.news_date { 746 margin-bottom: 12px; 747} 748 749.current_day { 750 font-weight: bold; 751 font-size: 16px; 752} 753 754.cal_day { 755 float: left; 756 font-weight: bold; 757} 758 759.rtl_cal_day { 760 direction: rtl; 761 float: right; 762 color: #00f; 763 font-weight: bold; 764} 765 766#user-page h1 { 767 margin: 0.25em auto 0.6em; 768} 769 770.tvertline { 771 vertical-align: bottom; 772} 773 774#childbox { 775 padding: 5px; 776 position: absolute; 777 display: none; 778 text-align: start; 779 white-space: nowrap; 780 top: 20px; 781 left: 0; 782} 783 784.layout3 #childbox { 785 top: auto; 786 bottom: 20px; 787} 788 789#childbox a.name1 { 790 display: block; 791 margin-left: 5px; 792} 793 794.person0 { 795 background-color: #ddf; 796 border: outset #999 1px; 797 vertical-align: top; 798} 799 800.person1 { 801 background-color: #afa; 802 border: outset #afa 1px; 803 vertical-align: top; 804} 805 806.person2 { 807 background-color: #faa; 808 border: outset #faa 1px; 809 vertical-align: top; 810} 811 812.person3 { 813 background-color: #aad; 814 border: outset #55f 1px; 815 vertical-align: top; 816} 817 818.person4 { 819 background-color: #f55; 820 border: outset #f55 1px; 821 vertical-align: top; 822} 823 824.person5 { 825 background-color: #5f5; 826 border: outset #5f5 1px; 827 vertical-align: top; 828} 829 830.starredname { 831 text-decoration: underline; 832} 833 834.search_hit { 835 background-color: #ff0; 836} 837 838.descriptionbox { 839 font-size: 1rem; 840 color: #333; 841 border: 1px solid #999; 842 vertical-align: top; 843 padding: 3px; 844} 845 846.optionbox { 847 font-size: 1rem; 848 color: #333; 849 border: 1px solid #999; 850 vertical-align: top; 851 white-space: nowrap; 852 padding: 3px; 853} 854 855.optionbox .list_value { 856 background-color: #fff; 857 border: 1px solid #999; 858 border-radius: 3px; 859} 860 861.red { 862 color: #f00; 863} 864 865.wt-relation-fact, 866.wt-historic-fact { 867 opacity: 0.8; 868} 869 870.messagebox { 871 background-color: #c2ceef; 872 border: solid #ccc 1px; 873} 874 875/* ---Pending edits--- */ 876.wt-new { 877} 878 879.wt-old { 880} 881 882.tag_cloud { 883 text-align: center; 884} 885 886.tag_cloud a { 887 white-space: nowrap; 888} 889 890.nowrap { 891 white-space: nowrap; 892} 893 894.wrap { 895 white-space: normal; 896} 897 898.statistics-page { 899 text-align: center; 900} 901 902.gchart { 903 border: solid #999 1px; 904} 905 906#facts_content dd { 907 float: left; 908 width: 70%; 909} 910 911/* this keeps the tag color the same when it is a link as when not */ 912 913.place { 914 padding-top: 5px; 915} 916 917.filtersH, 918.filtersF { 919 margin: 4px; 920} 921 922.filtersH img { 923 margin-bottom: 2px; 924} 925 926.list-charts { 927 text-align: center; 928} 929 930#place-hierarchy h2, 931#place-hierarchy h4 { 932 text-align: center; 933} 934 935/* ==== FAQ table styles ===== */ 936table.faq { 937 background-color: #e0e0e0; 938 margin: 5px 0 50px 5px; 939 width: 98%; 940} 941 942table.faq tr:nth-child(odd) td { 943 background-color: #e7eef3; 944} 945 946div.faq_title { 947 background-color: #e0e0e0; 948 margin: 1em 0; 949 padding: .25em; 950 font-weight: bold; 951 width: 98%; 952} 953 954div.faq_body { 955 clear: both; 956 padding: 0 1em; 957} 958 959.faq_top { 960 float: right; 961} 962 963/* === Positioning edit, copy, delete links === */ 964/* General use */ 965.editfacts { 966 clear: left; 967 padding-top: 15px; 968} 969 970#indi_note { 971 margin: 0 0 5px; 972} 973 974.indi_table { 975 clear: left; 976} 977 978#sex { 979 float: right; 980} 981 982#dates { 983 float: right; 984} 985 986#individual-names .wt-icon-edit, 987#individual-names .wt-icon-delete { 988 float: right; 989} 990 991#indi_note .fact_NOTE { 992 float: left; 993 margin: 0 5px 0 0; 994} 995 996#indi_note .fact_SOUR { 997 margin: 3px 0; 998} 999 1000#indi_note .fact_SOUR a { 1001 font-size: 100%; 1002} 1003 1004#indi_note .fact_NOTE, 1005#indi_note .fact_SOUR { 1006 clear: both; 1007} 1008 1009/* markdown formatting */ 1010 1011.markdown { 1012 /* Tables and pre-formatted text can break the layout. */ 1013 overflow-x: auto; 1014} 1015 1016.markdown p { 1017 margin: 0 0 0.5em; 1018 white-space: pre-wrap; 1019} 1020 1021.markdown table { 1022 border-collapse: collapse; 1023 margin-bottom: 5px; 1024} 1025 1026.markdown th { 1027 font-weight: bold; 1028} 1029 1030.markdown td, 1031.markdown th { 1032 border: solid thin #000; 1033 padding: 3px; 1034} 1035 1036.odometer { 1037 font-family: courier, monospace; 1038 font-weight: bold; 1039 background: #000; 1040 color: #fff; 1041} 1042 1043/* ======== Indi tabs ======== */ 1044/* Facts & Events tab */ 1045.media-display-image { 1046 float: left; 1047} 1048 1049.media-display-title { 1050 float: left; 1051 font-style: italic; 1052 margin: 10px; 1053} 1054 1055/* Sidebar - Family navigator */ 1056.wt-family-navigator-dropdown-heading { 1057 font-weight: bold; 1058 font-size: inherit; 1059 color: inherit; 1060} 1061 1062/* Sidebar - Descendants */ 1063#sb_content_descendancy { 1064 margin-top: 2px; 1065} 1066 1067#sb_desc_content { 1068 margin-left: 3px; 1069 font-size: 0.8em; 1070} 1071 1072#sb_desc_content ul { 1073 padding: 0; 1074 margin: 0; 1075} 1076 1077.sb_desc_indi_li { 1078 list-style-type: none; 1079} 1080 1081/* Individuals and Families */ 1082#sidebar-content-individuals, 1083#sidebar-content-families { 1084 margin-top: 2px; 1085} 1086 1087.sb_indi_surname_li, 1088.sb_fam_surname_li { 1089 list-style-image: url(icons/plus.png); 1090} 1091 1092.name_tree_div ul { 1093 padding: 0; 1094 margin: 0; 1095} 1096 1097.name_tree_div li { 1098 list-style: none; 1099 margin: 0; 1100 padding: 0; 1101} 1102 1103/* Clippings */ 1104#sb_clippings_content ul { 1105 padding: 0; 1106 margin: 0; 1107} 1108 1109#sb_clippings_content li { 1110 list-style: none; 1111 margin: 0; 1112 padding: 0; 1113 white-space: nowrap; 1114} 1115 1116/* Extra info */ 1117#sb_content_extra_info { 1118 font-size: 80%; 1119 font-weight: bold; 1120 margin-top: 1px; 1121 overflow: hidden; 1122 padding: 5px; 1123} 1124 1125#sb_content_extra_info .editfacts { 1126 float: right; 1127 margin-top: -30px; 1128} 1129 1130#sb_content_extra_info a { 1131 display: block; 1132} 1133 1134#sb_content_extra_info span { 1135 font-weight: normal; 1136} 1137 1138#sb_content_extra_info span a { 1139 display: inline; 1140} 1141 1142#sb_content_extra_info #hitcounter { 1143 border-top: 1px solid #b2c7d7; 1144 font-weight: bold; 1145 padding-top: 5px; 1146} 1147 1148/* http://www.jacklmoore.com/colorbox */ 1149#colorbox, 1150#cboxOverlay, 1151#cboxWrapper { 1152 position: absolute; 1153 top: 0; 1154 left: 0; 1155 z-index: 9999; 1156 overflow: hidden; 1157} 1158 1159#cboxWrapper { 1160 max-width: none; 1161} 1162 1163#cboxOverlay { 1164 position: fixed; 1165 width: 100%; 1166 height: 100%; 1167 background: #fff; 1168} 1169 1170#cboxContent { 1171 background: #fff; 1172 overflow: hidden; 1173 position: relative; 1174 padding: 0.5rem; 1175 border: 0.25rem solid #ccc; 1176} 1177 1178#cboxLoadingOverlay, 1179#cboxLoadingGraphic { 1180 position: absolute; 1181 top: 0; 1182 left: 0; 1183 width: 100%; 1184 height: 100%; 1185} 1186 1187.cboxPhoto { 1188 float: left; 1189 margin: auto; 1190 border: 0; 1191 display: block; 1192 max-width: none; 1193} 1194 1195#colorbox, 1196#cboxContent, 1197#cboxLoadedContent { 1198 box-sizing: content-box; 1199} 1200 1201#cboxError { 1202 padding: 50px; 1203 border: 1px solid #ccc; 1204} 1205 1206#cboxLoadedContent { 1207 margin-bottom: 28px; 1208} 1209 1210#cboxTitle { 1211 background: #fff; 1212 position: absolute; 1213 bottom: 0.25rem; 1214 left: 0; 1215 margin: 0 3rem; 1216 text-align: center; 1217} 1218 1219#cboxLoadingGraphic { 1220 background: url(images/loading-32x32.gif) no-repeat center center; 1221} 1222 1223#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { 1224 background: none; 1225 border: 0; 1226 cursor: pointer; 1227 font-family: "Font Awesome\ 5 Free", sans-serif; 1228 font-weight: 900; 1229 overflow: visible; 1230 padding: 0; 1231 position: absolute; 1232} 1233 1234#cboxSlideshow { 1235 bottom: 0.25rem; 1236 right: 0.25rem; 1237} 1238 1239#cboxPrevious { 1240 bottom: 0.25rem; 1241 left: 0.25rem; 1242} 1243 1244#cboxNext { 1245 bottom: 0.25rem; 1246 left: 1.5rem; 1247} 1248 1249#cboxClose { 1250 top: 0.25rem; 1251 right: 0.25rem; 1252} 1253 1254/* Stories module */ 1255.story_title { 1256 padding-top: 12px; 1257 font-size: 13px; 1258 height: 32px; 1259 font-weight: bold; 1260} 1261 1262.story_body { 1263 padding: 20px; 1264 white-space: normal; 1265} 1266 1267.story_edit { 1268 padding: 12px; 1269} 1270 1271/*-- Fan chart ---- */ 1272.fan_chart_menu { 1273 background: #fff; 1274 position: absolute; 1275 display: none; 1276 z-index: 100; 1277} 1278 1279#fan_chart ul { 1280 list-style-type: none; 1281 margin: 0; 1282} 1283 1284/* Lifespans chart */ 1285.wt-lifespans-subtitle { 1286 text-align: center; 1287} 1288 1289.wt-lifespans-scale { 1290 white-space: nowrap; 1291} 1292 1293.wt-lifespans-decade { 1294 width: 70px; 1295 height: 60px; 1296 display: inline-block; 1297 background-image: url(images/lifespan-decade.png); 1298 background-position-y: bottom; 1299 background-repeat: no-repeat; 1300 background-size: 70px 37px; 1301} 1302 1303.wt-lifespans-individuals { 1304 background: #fafafa; 1305} 1306 1307.wt-lifespans-individual { 1308 1309} 1310 1311.wt-lifespans-summary { 1312 background: #ffffff; 1313 border: thin solid #000; 1314 z-index: 1; 1315} 1316 1317.wt-lifespans-summary-link { 1318 font-weight: bold; 1319} 1320 1321/*-- timeline --*/ 1322#timeline_chart { 1323 position: relative; 1324 top: 0; 1325 left: 0; 1326} 1327 1328[class^="icon-"], 1329[class*=" icon-"] { 1330 display: inline-block; 1331 vertical-align: middle; 1332 background-repeat: no-repeat; 1333} 1334 1335.icon-cfamily { 1336 content: url(colors/images/cfamily.png); 1337} 1338 1339.icon-childless { 1340 content: url(images/childless.png); 1341} 1342 1343.icon-children { 1344 content: url(images/children.png); 1345} 1346 1347.icon-edit_indi { 1348 content: url(colors/images/edit_indi.png); 1349} 1350 1351.icon-fam-list { 1352 content: url(colors/images/sfamily.png); 1353} 1354 1355.icon-indi-list { 1356 content: url(colors/images/indis.png); 1357} 1358 1359.icon-loading-small { 1360 content: url(images/indicator.gif); 1361} 1362 1363.icon-minus { 1364 content: url(icons/minus.png); 1365} 1366 1367.icon-mypage { 1368 content: url(colors/images/mypage.png); 1369} 1370 1371.icon-plus { 1372 content: url(icons/plus.png); 1373} 1374 1375.icon-resn-confidential { 1376 content: url(images/resn_confidential.png); 1377} 1378 1379.icon-resn-locked { 1380 content: url(images/resn_locked.png); 1381} 1382 1383.icon-resn-none { 1384 content: url(images/resn_none.png); 1385} 1386 1387.icon-resn-privacy { 1388 content: url(images/resn_privacy.png); 1389} 1390 1391.icon-rings { 1392 content: url(images/rings.png); 1393} 1394 1395.icon-selected { 1396 content: url(colors/images/selected.png); 1397} 1398 1399/* Silhouettes on charts */ 1400.icon-silhouette-F { 1401 content: url(colors/images/silhouette_female_small.png); 1402} 1403 1404.icon-silhouette-M { 1405 content: url(colors/images/silhouette_male_small.png); 1406} 1407 1408.icon-silhouette-U { 1409 content: url(colors/images/silhouette_unknown_small.png); 1410} 1411 1412/* 1413 * Any element that is loaded dynamically has the class wt-ajax-load. 1414 * We can provide a "loading" placeholder for empty elements with this class. 1415 */ 1416.wt-ajax-load:empty { 1417} 1418 1419/* 1420 * Default icons are provided by FontAwesome. 1421 */ 1422.wt-icon-anniversary { 1423} 1424 1425.wt-icon-arrow-down { 1426 content: url(colors/icons/arrow-down.png); 1427} 1428 1429a > .wt-icon-arrow-down:hover { 1430 content: url(colors/icons/arrow-down-hover.png); 1431} 1432 1433.wt-icon-arrow-left { 1434 content: url(colors/icons/arrow-left.png); 1435} 1436 1437a > .wt-icon-arrow-left:hover { 1438 content: url(colors/icons/arrow-left-hover.png); 1439} 1440 1441.wt-icon-arrow-right { 1442 content: url(colors/icons/arrow-right.png); 1443} 1444 1445a > .wt-icon-arrow-right:hover { 1446 content: url(colors/icons/arrow-right-hover.png); 1447} 1448 1449.wt-icon-arrow-up { 1450 content: url(colors/icons/arrow-up.png); 1451} 1452 1453a > .wt-icon-arrow-up:hover { 1454 content: url(colors/icons/arrow-up-hover.png); 1455} 1456 1457.wt-icon-bing-maps { 1458} 1459 1460.wt-icon-calendar { 1461} 1462 1463.wt-icon-collapse { 1464} 1465 1466.wt-icon-coordinates { 1467} 1468 1469.wt-icon-copy { 1470} 1471 1472.wt-icon-delete { 1473} 1474 1475.wt-icon-edit { 1476} 1477 1478.wt-icon-expand { 1479} 1480 1481.wt-icon-family { 1482} 1483 1484.wt-icon-google-maps { 1485} 1486 1487.wt-icon-help { 1488 content: url(colors/icons/help.png); 1489} 1490 1491.wt-icon-individual { 1492} 1493 1494.wt-icon-keyboard { 1495} 1496 1497.wt-icon-media { 1498} 1499 1500.wt-icon-note { 1501} 1502 1503.wt-icon-openstreetmap { 1504} 1505 1506.wt-icon-preferences { 1507} 1508 1509.wt-icon-reorder { 1510} 1511 1512.wt-icon-repository { 1513} 1514 1515.wt-icon-sex-f { 1516} 1517 1518.wt-icon-sex-m { 1519} 1520 1521.wt-icon-sex-u { 1522} 1523 1524.wt-icon-sex-x { 1525} 1526 1527.wt-icon-source { 1528} 1529 1530.wt-icon-submitter { 1531} 1532 1533.wt-icon-warning { 1534} 1535 1536.wt-icon-zoom-in { 1537 content: url(colors/icons/zoom-in.png); 1538} 1539 1540.wt-icon-zoom-out { 1541 content: url(colors/icons/zoom-out.png); 1542} 1543 1544/* Miscellaneous images */ 1545.icon-indis { 1546 content: url(colors/images/mypage.png); 1547} 1548 1549.icon-patriarch { 1550 content: url(colors/images/patriarch.png); 1551} 1552 1553.icon-pedigree { 1554 content: url(colors/images/pedigree.png); 1555} 1556 1557.icon-sfamily { 1558 content: url(colors/images/sfamily.png); 1559} 1560 1561.icon-user_add { 1562 content: url(colors/images/user_add.png); 1563} 1564 1565/* Census assistant */ 1566.wt-census-assistant-form-control:focus { 1567} 1568 1569/* 1570 * Drag and drop sortable lists 1571 */ 1572.wt-sortable-list { 1573} 1574 1575.wt-sortable-item { 1576} 1577 1578/* Some blocks show a reduced version on the right-hand side. */ 1579.wt-side-blocks .wt-side-block-optional { 1580 display: none !important; 1581} 1582 1583/* my page chart enhancements */ 1584.wt-block-content-charts { 1585 overflow: auto; 1586} 1587 1588/* Some charts are wider than the page. */ 1589.wt-chart { 1590 overflow-x: auto; 1591 overflow-y: hidden; 1592} 1593 1594/* Fit thumbnail into parent on charts */ 1595.select2-selection.select2-selection--single { 1596 min-height: 36px; 1597 height: auto; 1598 padding: 2px 0; 1599} 1600 1601.select2-container .select2-selection--single .select2-selection__rendered { 1602 padding-left: 2px; 1603} 1604 1605.select2-selection--single .NAME { 1606 padding-left: 4px; 1607} 1608 1609/* 1610 * Place hierarchy 1611 * 1612 * wt-place-hierarchy-page 1613 */ 1614 1615#place-hierarchy ul { 1616 list-style-type: none; 1617} 1618 1619.d-table-cell { 1620 padding-right: 5px; 1621} 1622 1623/* Some menus (e.g. languages) can be longer than a page */ 1624.dropdown-menu { 1625 max-height: 30rem; 1626 overflow-x: hidden; 1627} 1628 1629/* Forms */ 1630.col-form-label { 1631 font-weight: bold; 1632} 1633