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