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/*-- Hourglass ---- */ 1371#hourglass_chart img.line4 { 1372 vertical-align: middle; 1373} 1374 1375#hourglass_chart table, 1376.charts_block table { 1377 border-collapse: collapse; 1378} 1379 1380#hourglass_chart td, 1381.charts_block td { 1382 padding: 0; 1383 empty-cells: show; 1384} 1385 1386/* Lifespans chart */ 1387.wt-lifespans-subtitle { 1388 text-align: center; 1389} 1390 1391.wt-lifespans-scale { 1392 white-space: nowrap; 1393} 1394 1395.wt-lifespans-decade { 1396 width: 70px; 1397 height: 60px; 1398 display: inline-block; 1399 background-image: url(images/lifespan-decade.png); 1400 background-position-y: bottom; 1401 background-repeat: no-repeat; 1402 background-size: 70px 37px; 1403} 1404 1405.wt-lifespans-individuals { 1406 background: #fafafa; 1407} 1408 1409.wt-lifespans-individual { 1410 1411} 1412 1413.wt-lifespans-summary { 1414 background: #ffffff; 1415 border: thin solid #000; 1416 z-index: 1; 1417} 1418 1419.wt-lifespans-summary-link { 1420 font-weight: bold; 1421} 1422 1423/*-- Pedigree ---- */ 1424.tvertline { 1425 vertical-align: bottom; 1426} 1427 1428.optionbox, .descriptionbox { 1429 border: solid #000 1px; 1430 vertical-align: top; 1431 padding: 3px; 1432} 1433 1434#childbox { 1435 padding: 5px; 1436 position: absolute; 1437 display: none; 1438 text-align: start; 1439 white-space: nowrap; 1440 top: 20px; 1441 left: 0; 1442} 1443 1444.layout3 #childbox { 1445 top: auto; 1446 bottom: 20px; 1447} 1448 1449#childbox a.name1 { 1450 display: block; 1451 margin-left: 5px; 1452} 1453 1454.person0, .person1, .person2, .person3, .person4, .person5 { 1455 border:outset #555 1px; 1456 vertical-align:top; 1457} 1458.person0{ 1459 background-color:#eee; 1460} 1461 1462.person1{ 1463 background-color:#bfbfbf; 1464} 1465 1466.person2{ 1467 background-color:#999; 1468} 1469 1470.person3{ 1471 background-color:#dfdfdf; 1472} 1473 1474.person4{ 1475 background-color:#eee; 1476} 1477 1478.person5{ 1479 background-color:#fefefe; 1480} 1481 1482/*-- timeline --*/ 1483#timeline_chart { 1484 position: relative; 1485 top: 0; 1486 left: 0; 1487} 1488 1489/* 1490 * Any element that is loaded dynamically has the class wt-ajax-load. 1491 * We can provide a "loading" placeholder for empty elements with this class. 1492 */ 1493.wt-ajax-load:empty { 1494 height: 32px; 1495 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 1496} 1497 1498/* 1499 * Default icons are provided by FontAwesome. 1500 * Some icons get mirrored on RTL pages. Typiclly arrows 1501 */ 1502[dir=rtl] .wt-flip-rtl { 1503 transform: scale(-1, 1); 1504} 1505 1506.wt-icon-anniversary { 1507} 1508 1509.wt-icon-arrow-down { 1510} 1511 1512a > .wt-icon-arrow-down:hover { 1513} 1514 1515.wt-icon-arrow-left { 1516} 1517 1518a > .wt-icon-arrow-left:hover { 1519} 1520 1521.wt-icon-arrow-right { 1522} 1523 1524a > .wt-icon-arrow-right:hover { 1525} 1526 1527.wt-icon-arrow-up { 1528} 1529 1530a > .wt-icon-arrow-up:hover { 1531} 1532 1533.wt-icon-collapse { 1534} 1535 1536.wt-icon-coordinates { 1537} 1538 1539.wt-icon-expand { 1540} 1541 1542.wt-icon-reorder { 1543} 1544 1545.wt-icon-sex-f { 1546 color: var(--sex-m-fg); 1547} 1548 1549.wt-icon-sex-m { 1550 color: var(--sex-m-fg); 1551} 1552 1553.wt-icon-sex-u { 1554 color: var(--sex-u-fg); 1555} 1556 1557.wt-icon-sex-x { 1558 color: var(--sex-u-fg); 1559} 1560 1561.wt-icon-warning { 1562} 1563 1564.wt-icon-zoom-in { 1565} 1566 1567.wt-icon-zoom-out { 1568} 1569 1570/* 1571 * .wt-icon-bing-maps 1572 * .wt-icon-calendar 1573 * .wt-icon-copy 1574 * .wt-icon-delete 1575 * .wt-icon-edit 1576 * .wt-icon-email 1577 * .wt-icon-family 1578 * .wt-icon-help 1579 * .wt-icon-individual 1580 * .wt-icon-google-maps 1581 * .wt-icon-keyboard 1582 * .wt-icon-media 1583 * .wt-icon-note 1584 * .wt-icon-openstreetmap 1585 * .wt-icon-preferences 1586 * .wt-icon-repository 1587 * .wt-icon-source 1588 * .wt-icon-submitter 1589 */ 1590[class^="icon-"], 1591[class*=" icon-"] { 1592 display: inline-block; 1593 vertical-align: middle; 1594 background-repeat: no-repeat; 1595 background-size: cover; 1596} 1597 1598.icon-add { 1599 width: 14px; 1600 height: 15px; 1601 background-image: url(images/add.png); 1602} 1603 1604.icon-cfamily { 1605} 1606 1607.icon-childless { 1608 width: 25px; 1609 height: 25px; 1610 background-image: url(minimal/images/childless.png); 1611} 1612 1613.icon-children { 1614 width: 16px; 1615 height: 16px; 1616 background-image: url(minimal/images/children.png); 1617} 1618 1619.icon-clippings { 1620 width: 22px; 1621 height: 22px; 1622 background-image: url(minimal/images/clippings.png); 1623} 1624 1625.icon-edit_indi { 1626 width: 20px; 1627 height: 20px; 1628 background-image: url(minimal/images/edit_sm.png); 1629} 1630 1631.icon-fam-list { 1632 width: 20px; 1633 height: 20px; 1634 background-image: url(minimal/icons/family.png); 1635} 1636 1637.icon-indi-list { 1638 width: 20px; 1639 height: 20px; 1640 background-image: url(minimal/images/indis.png); 1641} 1642 1643.icon-loading-small { 1644 width: 16px; 1645 height: 16px; 1646 background-image: url(minimal/images/indicator.gif); 1647} 1648 1649.icon-loading-large { 1650 width: 32px; 1651 height: 32px; 1652 background-image: url(images/loading-32x32.gif); 1653} 1654 1655.icon-media { 1656 width: 20px; 1657 height: 20px; 1658 background-image: url(minimal/images/media.png); 1659} 1660 1661.icon-media-list { 1662 width: 20px; 1663 height: 20px; 1664 background-image: url(minimal/images/media.png); 1665} 1666 1667.icon-media-next { 1668 width: 20px; 1669 height: 20px; 1670 background-image: url(minimal/images/rdarrow.png); 1671} 1672 1673.icon-media-play { 1674 width: 20px; 1675 height: 20px; 1676 background-image: url(minimal/images/rarrow.png); 1677} 1678 1679.icon-media-stop { 1680 width: 16px; 1681 height: 17px; 1682 background-image: url(minimal/images/stop.png); 1683} 1684 1685.icon-minus { 1686 width: 11px; 1687 height: 11px; 1688 background-image: url(minimal/images/minus.png); 1689} 1690 1691.icon-mypage { 1692 width: 24px; 1693 height: 24px; 1694 background-image: url(minimal/images/mypage.png); 1695} 1696 1697.icon-note { 1698 width: 20px; 1699 height: 20px; 1700 background-image: url(minimal/icons/note.png); 1701} 1702 1703.icon-plus { 1704 width: 11px; 1705 height: 11px; 1706 background-image: url(minimal/images/plus.png); 1707} 1708 1709.icon-remove { 1710 width: 14px; 1711 height: 15px; 1712 background-image: url(minimal/images/remove.png); 1713} 1714 1715.icon-resn-confidential { 1716 width: 16px; 1717 height: 16px; 1718 background-image: none; 1719} 1720 1721.icon-resn-locked { 1722 background-image: none; 1723} 1724 1725.icon-resn-none { 1726 background-image: none; 1727} 1728 1729.icon-resn-privacy { 1730 background-image: none; 1731} 1732 1733.icon-rings { 1734 width: 9px; 1735 height: 9px; 1736 background-image: url(minimal/images/rings.png); 1737} 1738 1739.icon-selected { 1740 width: 12px; 1741 height: 12px; 1742 background-image: url(minimal/images/selected.png); 1743} 1744 1745.icon-sfamily { 1746 width: 24px; 1747 height: 24px; 1748 background-image: url(minimal/images/sfamily.png); 1749} 1750 1751.icon-source { 1752 width: 20px; 1753 height: 20px; 1754 background-image: url(minimal/images/source.png); 1755} 1756 1757/* Silhouettes on charts */ 1758.icon-silhouette-F { 1759 width: 37px; 1760 height: 50px; 1761 background-image: url(minimal/images/silhouette_female_small.png); 1762} 1763 1764.icon-silhouette-M { 1765 width: 37px; 1766 height: 50px; 1767 background-image: url(minimal/images/silhouette_male_small.png); 1768} 1769 1770.icon-silhouette-U { 1771 width: 37px; 1772 height: 50px; 1773 background-image: url(minimal/images/silhouette_unknown_small.png); 1774} 1775 1776.icon-indis { 1777 width: 24px; 1778 height: 24px; 1779 background-image: url(minimal/images/indis.png); 1780} 1781 1782.icon-pedigree { 1783 width: 24px; 1784 height: 24px; 1785 background-image: url(minimal/images/pedigree.png); 1786} 1787 1788.icon-search { 1789 width: 24px; 1790 height: 24px; 1791 background-image: url(minimal/images/search.png); 1792} 1793 1794/* Census assistant */ 1795.wt-census-assistant-form-control:focus { 1796 min-width: 12rem; 1797} 1798 1799/* 1800 * Drag and drop sortable lists 1801 */ 1802.wt-sortable-list { 1803} 1804 1805.wt-sortable-item { 1806 cursor: move; 1807} 1808 1809/* Some blocks show a reduced version on the right-hand side. */ 1810.wt-side-blocks .wt-side-block-optional { 1811 display: none !important; 1812} 1813 1814/* my page chart enhancements */ 1815.wt-block-content-charts { 1816 flex-flow: column-reverse; 1817 overflow: auto; 1818} 1819 1820.wt-block-content-todays-events-block { 1821 padding: .25rem; 1822} 1823 1824/* Some charts are wider than the page. */ 1825.wt-chart { 1826 overflow-x: auto; 1827 overflow-y: hidden; 1828} 1829 1830/* Fit thumbnail into parent on charts */ 1831.select2-selection.select2-selection--single { 1832 min-height: 36px; 1833 height: auto; 1834 padding: 2px 0; 1835} 1836 1837.select2-container .select2-selection--single .select2-selection__rendered { 1838 padding-left: 2px; 1839} 1840 1841.select2-selection--single .NAME { 1842 padding-left: 4px; 1843} 1844 1845/* 1846 * These selectors control how the short horizontal lines are positioned in the Charts 1847 * Optimized for Win10 and FF, Chrome and Edge browsers 1848 * Ancestors 1849 * Descendants 1850 * amily book 1851 * Hourglass chart 1852 * 1853 */ 1854 1855/* Ascentors */ 1856.wt-chart-ancestors .linea1 { 1857 margin-bottom: 4px; 1858} 1859 1860.wt-chart-ancestors .linea2 { 1861 margin-bottom: 7px; 1862} 1863 1864.wt-chart-ancestors .linea3 { 1865 margin-bottom: 4px; 1866} 1867 1868.wt-chart-ancestors .linea4 { 1869 margin-bottom: 7px; 1870} 1871 1872.wt-chart-ancestors .linea5 { 1873 vertical-align: top; 1874} 1875 1876/* Descendants */ 1877.wt-chart-descendants .lined1 { 1878 margin-bottom: 4px; 1879} 1880 1881.wt-chart-descendants .lined2 { 1882 margin-bottom: 7px; 1883} 1884 1885.wt-chart-descendants .lined3 { 1886 margin-bottom: 4px; 1887} 1888 1889.wt-chart-descendants .lined4 { 1890 margin-bottom: 7px; 1891} 1892 1893.wt-chart-descendants .linea5 { 1894 vertical-align: top; 1895} 1896 1897/* Hourglass */ 1898.lineh1 { 1899 margin-bottom: 4px; 1900} 1901 1902.lineh2 { 1903 margin-bottom: 4px; 1904} 1905 1906.lineh3 { 1907 margin-bottom: 7px; 1908} 1909 1910/* 1911 * Pedigree chart 1912 * 1913 * wt-chart, wt-chart-pedigree 1914 */ 1915.wt-chart-pedigree, .wt-chart-hourglass { 1916 overflow-y: auto; 1917} 1918 1919/* 1920 * Place hierarchy 1921 * 1922 * wt-place-hierarchy-page 1923 */ 1924 1925#place-hierarchy ul { 1926 list-style-type: none; 1927} 1928 1929.d-table-cell { 1930 padding-right: 5px; 1931} 1932 1933/* Some menus (e.g. languages) can be longer than a page */ 1934.dropdown-menu { 1935 max-height: 30rem; 1936 overflow-x: hidden; 1937} 1938 1939/* Forms */ 1940.col-form-label { 1941 font-weight: bold; 1942} 1943