1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2020 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 19/* Colors for chart boxes, etc. */ 20:root { 21 --sex-f-fg: #888888; 22 --sex-m-fg: #888888; 23 --sex-u-fg: #888888; 24 --sex-f-bg: #ffffff; 25 --sex-m-bg: #ffffff; 26 --sex-u-bg: #ffffff; 27 --chart-line: solid gray thin; 28 --chart-line-radius: 1rem; 29} 30 31/* Override Bootstrap formatting */ 32.btn-link { 33 padding-left: 0.25rem; 34 padding-right: 0.25rem; 35} 36 37.table-given-name { 38 overflow-x: hidden; 39} 40 41.container-fluid { 42 padding-left: 5px; 43 padding-right: 5px; 44} 45 46table { 47 border-collapse: separate; 48} 49 50/* 51 * Pages have the following high-level structure: 52 * 53 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 54 * +---wt-header-wrapper 55 * | +---wt-header-container 56 * | +---wt-header-content 57 * | +---wt-accessibility-links 58 * | +---wt-site-logo 59 * | +---wt-site-title 60 * | +---wt-header-search 61 * | | +---wt-header-search-form 62 * | | +---wt-header-search-field 63 * | | +---wt-header-search-button 64 * | +---wt-secondary-navigation 65 * | | +---wt-user-menu 66 * | +---wt-primary-navigation 67 * | +---wt-genealogy-menu 68 * +---wt-main-wrapper 69 * | +---wt-main-container 70 * | +---wt-main-content 71 * | +---wt-messages 72 * | +---wt-page-title 73 * | +---wt-page-options wt-page-options-xxxxx 74 * | +---wt-page-content 75 * +---wt-footers 76 * +---wt-footer wt-footer-xxxxx 77 */ 78 79.wt-global { 80 /* Avoid extremes of black and white. It is better for users with dyslexia. */ 81 color: #0a0a0a; 82 background-color: #f9f9f9; 83} 84 85.wt-header-wrapper { 86} 87 88.wt-header-container { 89 margin-top: 1rem; 90} 91 92.wt-header-content { 93} 94 95.wt-accessibility-links { 96} 97 98.wt-site-logo { 99 display: none; 100} 101 102.wt-site-title { 103 order: 1; 104 flex: 1 1 auto; 105 width: auto; 106 font-size: 1.75rem; 107} 108 109.wt-header-search { 110 order: 3; 111 flex: 0 0 15rem; 112} 113 114.wt-header-search-form { 115} 116 117.wt-header-search-field { 118} 119 120.wt-header-search-button { 121} 122 123.wt-secondary-navigation { 124 order: 2; 125 flex: 0 0 auto; 126 width: auto; 127 white-space: nowrap; 128} 129 130.wt-user-menu { 131 flex-wrap: nowrap; 132} 133 134.wt-user-menu .nav-link { 135 padding: 0.5rem; 136} 137 138.wt-primary-navigation { 139 order: 4; 140 /* Extend to full page width */ 141 flex: 0 1 100vw; 142 max-width: 100vw; 143 /* Recalculate margins for content */ 144 margin: 0 calc(50% - 50vw); 145 padding: 0 calc(50vw - 50%); 146 border-bottom: 2px solid #aaa; 147} 148 149.wt-genealogy-menu { 150 justify-content: center; 151} 152 153.wt-genealogy-menu .nav-link { 154 padding: 0.5rem; 155} 156 157.wt-main-container { 158 /* Space between the header/footer and the main content. */ 159 padding-top: 1rem; 160 padding-bottom: 1rem; 161} 162 163.wt-main { 164} 165 166.wt-messages { 167} 168 169.wt-page-title { 170 text-align: center; 171} 172 173.wt-page-content { 174 margin-top: 1rem; 175} 176 177.wt-footers { 178} 179 180.wt-footer { 181} 182 183.wt-footer-contact { 184} 185 186.wt-footer-cookies { 187 background: #aaa; 188 color: #fff; 189 transition: height 0.5s; 190} 191 192.wt-footer-page-views { 193} 194 195.wt-footer-powered-by { 196} 197 198.wt-footer-powered-by-webtrees { 199} 200 201/* 202 * The tree/user home pages 203 * 204 * wt-home-page / wt-user-page 205 * +---wt-main-blocks 206 * | +---wt-block, wt-block-AAA 207 * | +---wt-block, wt-block-BBB 208 * | +---wt-block, wt-block-CCC 209 * +---wt-side-blocks 210 * +---wt-block, wt-block-XXX 211 * +---wt-block, wt-block-YYY 212 * +---wt-block, wt-block-ZZZ 213 * 214 * Each block as the structure 215 * wt-block, wt-block-XXX 216 * +---wt-block-header, wt-block-header-XXX 217 * +---wt-block-content, wt-block-content-XXX 218 */ 219 220.wt-block { 221 border: solid #000 1px; 222} 223 224.wt-block-header { 225 background-color: #fff; 226} 227 228.wt-block-content { 229} 230 231.wt-block-content .list_table { 232 border-spacing: 1px; 233 border: solid #000 1px; 234 border-right: 0; 235} 236 237.wt-block-content .list_value, 238.wt-block-content .list_value_wrap { 239 border: 0; 240 border-top: solid #000 1px; 241 border-right: solid #000 1px; 242} 243 244/* 245 * The individual page. 246 * 247 * wt-route-individual 248 * +---wt-header-wrapper 249 */ 250 251.wt-individual-silhouette { 252 content: url(images/individual-silhouette-unknown.png); 253} 254 255.wt-individual-silhouette-f { 256 content: url(images/individual-silhouette-female.png); 257} 258 259.wt-individual-silhouette-m { 260 content: url(images/individual-silhouette-male.png); 261} 262 263/* 264 * Chart-boxes are used to build the various charts. 265 * Each type of chart will set its own size and hide/show content. 266 * 267 * wt-chart-box 268 * +--- wt-chart-box-thumbnail 269 * +--- wt-chart-box-extra 270 * +--- wt-chart-box-zoom 271 * +--- wt-chart-box-icon 272 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 273 * +--- wt-chart-box-links 274 * +--- wt-chart-box-icon 275 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 276 * +--- wt-chart-box-name 277 * +--- wt-chart-box-lifespan 278 * +--- wt-chart-box-facts 279 * +--- wt-chart-box-fact 280 */ 281.wt-chart-box, 282.wt-chart-box-menu { 283 background: var(--sex-u-bg); 284 border: dashed var(--sex-u-fg) thin; 285} 286 287.wt-chart-box { 288 height: 5rem; 289 padding: 2px; 290 line-height: 1.1; 291} 292 293.wt-chart-box-f, 294.wt-chart-box-f .wt-chart-box-dropdown { 295 background: var(--sex-f-bg); 296 border: solid var(--sex-f-fg) thin; 297} 298 299.wt-chart-box-m, 300.wt-chart-box-m .wt-chart-box-dropdown { 301 background: var(--sex-m-bg); 302 border: solid var(--sex-m-fg) thin; 303} 304 305/* ---Pending edits--- */ 306.wt-new { 307 outline: solid thin blue; 308} 309 310.wt-old { 311 outline: solid thin red; 312} 313 314.list_value, 315.list_value_wrap { 316 border: solid #000 1px; 317 vertical-align: top; 318 padding: 4px; 319} 320 321.list_table { 322 margin: 0 auto; 323} 324 325.filtersH, 326.filtersF { 327 margin: 4px; 328} 329 330.filtersH img { 331 margin-bottom: 2px; 332} 333 334.list-charts { 335 text-align: center; 336} 337 338#place-hierarchy h2, 339#place-hierarchy h4 { 340 text-align: center; 341} 342 343/* ======== Block styles ===== */ 344#index_main_blocks { 345 clear: none; 346 width: 60%; 347 float: left; 348} 349 350#index_small_blocks { 351 clear: none; 352 width: 40%; 353 float: right; 354} 355 356#index_full_blocks { 357 clear: none; 358 width: 100%; 359} 360 361.block { 362 background-color: #fff; 363 color: #555; 364 border: solid #ccc 1px; 365 padding: 3px; 366 vertical-align: top; 367} 368 369.blockcontent { 370 margin: 5px; 371 overflow: auto; 372} 373 374.blockcontent .list_table { 375 border-spacing: 0; 376 border: solid #555 1px; 377 border-right: 0; 378} 379 380.blockcontent .list_value, 381.blockcontent .list_value_wrap { 382 border: 0; 383 border-top: solid #555 1px; 384 border-right: solid #555 1px; 385} 386 387.blockheader { 388 font-weight: bold; 389} 390 391/* end Block styles */ 392 393.user_welcome_block table, 394.gedcom_block_block table { 395 margin: auto; 396} 397 398.user_welcome_block td, 399.gedcom_block_block td { 400 width: 33%; 401 text-align: center; 402 vertical-align: top; 403} 404 405.user_welcome_block i, 406.gedcom_block_block i { 407 background-image: none; 408 height: 0; 409 width: 0; 410} 411 412/* Table of genealogical facts */ 413.wt-facts-table caption { 414 caption-side: top; 415} 416 417.wt-facts-table th { 418 border: 1px solid #000; 419 font-weight: normal; 420 min-width: 20%; 421} 422 423.wt-facts-table td { 424 border: solid #000 1px; 425} 426 427a { 428 color: #333; 429 text-decoration: none; 430} 431 432a:hover { 433 color: #333; 434 text-decoration: underline; 435} 436 437a:hover { 438 text-decoration: underline!important; 439} 440 441.parentdeath { 442 padding: 1px; 443} 444 445/* ==== FAQ table styles ===== */ 446table.faq { 447 background-color: #ddd; 448 margin: 5px 0 50px 5px; 449 width: 98%; 450} 451 452table.faq tr:nth-child(odd) td { 453 background-color: #fff; 454} 455 456div.faq_title { 457 background-color: #ddd; 458 margin: 1em 0; 459 padding: .25em; 460 font-weight: bold; 461 width: 98%; 462} 463 464div.faq_body { 465 clear: both; 466 padding: 0 1em; 467} 468 469.faq_top { 470 float: right; 471} 472 473/* === Positioning edit, copy, delete links === */ 474/* General use */ 475.editfacts { 476 clear: left; 477 padding-top: 15px; 478} 479 480#indi_note { 481 margin: 0 0 5px; 482} 483 484.indi_table { 485 clear: left; 486} 487 488#sex { 489 float: right; 490} 491 492#dates { 493 color: #666; 494 float: right; 495} 496 497.label { 498 font-weight: bold; 499} 500 501#individual-names .wt-icon-edit, 502#individual-names .wt-icon-delete { 503 float: right; 504} 505 506#indi_note .fact_NOTE { 507 float: left; 508 margin: 0 5px 0 0; 509} 510 511#indi_note .fact_SOUR { 512 margin: 3px 0; 513} 514 515#indi_note .fact_SOUR a { 516 font-size: 100%; 517} 518 519#indi_note .fact_NOTE, 520#indi_note .fact_SOUR { 521 clear: both; 522} 523 524/* markdown formatting */ 525 526.markdown { 527 /* Tables and pre-formatted text can break the layout. */ 528 overflow-x: auto; 529} 530 531.markdown p { 532 margin: 0 0 0.5em; 533 white-space: pre-wrap; 534} 535 536.markdown table { 537 border-collapse: collapse; 538 font-size: 10px; 539 margin-bottom: 5px; 540} 541 542.markdown th { 543 font-weight: bold; 544} 545 546.markdown td, 547.markdown th { 548 border: solid thin #000; 549 padding: 3px; 550} 551 552.odometer { 553 font-family: courier, monospace; 554 font-weight: bold; 555 background: #000; 556 color: #fff; 557} 558 559.upcoming_events_block button, 560.todays_events_block button { 561 margin: 0 20px; 562} 563 564/* Sidebar - Family navigator */ 565 566/* Sidebar - Descendants */ 567#sb_content_descendancy { 568 margin-top: 5px; 569} 570 571#sb_desc_content { 572 margin-left: 3px; 573 font-size: 0.8em; 574} 575 576#sb_desc_content ul { 577 padding: 0; 578 margin: 0; 579} 580 581.sb_desc_indi_li { 582 list-style-type: none; 583} 584 585/* Individuals and Families */ 586#sidebar-content-individuals, 587#sidebar-content-families { 588 margin-top: 5px; 589} 590 591.sb_indi_surname_li, 592.sb_fam_surname_li { 593 list-style-image: url(icons/plus.png); 594} 595 596.name_tree_div ul { 597 padding: 0; 598 margin: 0; 599} 600 601.name_tree_div li { 602 list-style: none; 603 margin: 0; 604 padding: 0; 605} 606 607/* Clippings */ 608#sb_clippings_content ul { 609 padding: 0; 610 margin: 0; 611} 612 613#sb_clippings_content li { 614 list-style: none; 615 margin: 0; 616 padding: 0; 617 white-space: nowrap; 618} 619 620/* Stories module */ 621.story_title { 622 padding-top: 12px; 623 font-size: 13px; 624 height: 32px; 625 font-weight: bold; 626} 627 628.story_body { 629 padding: 20px; 630 white-space: normal; 631} 632 633.story_edit { 634 padding: 12px; 635} 636 637/* Stories module */ 638.story_title { 639 padding-top: 12px; 640 font-size: 13px; 641 height: 32px; 642 font-weight: bold; 643} 644 645.story_body { 646 padding: 20px; 647 white-space: normal; 648} 649 650.story_edit { 651 padding: 12px; 652} 653 654/* ====== Charts Styles ======== */ 655 656#people label { 657 display: block; 658} 659 660/*-- Fan chart ---- */ 661.fan_chart_menu { 662 background: #fff; 663 position: absolute; 664 display: none; 665 z-index: 100; 666} 667 668#fan_chart ul { 669 list-style-type: none; 670 margin: 0; 671} 672 673/* Lifespans chart */ 674.wt-lifespans-subtitle { 675 text-align: center; 676} 677 678.wt-lifespans-scale { 679 white-space: nowrap; 680} 681 682.wt-lifespans-decade { 683 width: 70px; 684 height: 60px; 685 display: inline-block; 686 background-image: url(images/lifespan-decade.png); 687 background-position-y: bottom; 688 background-repeat: no-repeat; 689 background-size: 70px 37px; 690} 691 692.wt-lifespans-individuals { 693 background: #fafafa; 694} 695 696.wt-lifespans-individual { 697 698} 699 700.wt-lifespans-summary { 701 background: #ffffff; 702 border: thin solid #000; 703 z-index: 1; 704} 705 706.wt-lifespans-summary-link { 707 font-weight: bold; 708} 709 710/*-- Pedigree ---- */ 711.tvertline { 712 vertical-align: bottom; 713} 714 715.optionbox, .descriptionbox { 716 border: solid #000 1px; 717 vertical-align: top; 718 padding: 3px; 719} 720 721#childbox { 722 padding: 5px; 723 position: absolute; 724 display: none; 725 text-align: start; 726 white-space: nowrap; 727 top: 20px; 728 left: 0; 729} 730 731.layout3 #childbox { 732 top: auto; 733 bottom: 20px; 734} 735 736#childbox a.name1 { 737 display: block; 738 margin-left: 5px; 739} 740 741.person0, .person1, .person2, .person3, .person4, .person5 { 742 border:outset #555 1px; 743 vertical-align:top; 744} 745.person0{ 746 background-color:#eee; 747} 748 749.person1{ 750 background-color:#bfbfbf; 751} 752 753.person2{ 754 background-color:#999; 755} 756 757.person3{ 758 background-color:#dfdfdf; 759} 760 761.person4{ 762 background-color:#eee; 763} 764 765.person5{ 766 background-color:#fefefe; 767} 768 769/*-- timeline --*/ 770#timeline_chart { 771 position: relative; 772 top: 0; 773 left: 0; 774} 775 776/* 777 * Any element that is loaded dynamically has the class wt-ajax-load. 778 * We can provide a "loading" placeholder for empty elements with this class. 779 */ 780.wt-ajax-load:empty { 781 height: 32px; 782 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 783} 784 785/* 786 * Default icons are provided by FontAwesome. 787 */ 788.wt-icon-anniversary { 789} 790 791.wt-icon-arrow-down { 792} 793 794a > .wt-icon-arrow-down:hover { 795} 796 797.wt-icon-arrow-left { 798} 799 800a > .wt-icon-arrow-left:hover { 801} 802 803.wt-icon-arrow-right { 804} 805 806a > .wt-icon-arrow-right:hover { 807} 808 809.wt-icon-arrow-up { 810} 811 812a > .wt-icon-arrow-up:hover { 813} 814 815.wt-icon-bing-maps { 816} 817 818.wt-icon-calendar { 819} 820 821.wt-icon-collapse { 822} 823 824.wt-icon-coordinates { 825} 826 827.wt-icon-copy { 828} 829 830.wt-icon-delete { 831} 832 833.wt-icon-edit { 834} 835 836.wt-icon-expand { 837} 838 839.wt-icon-family { 840} 841 842.wt-icon-google-maps { 843} 844 845.wt-icon-help { 846} 847 848.wt-icon-individual { 849} 850 851.wt-icon-keyboard { 852} 853 854.wt-icon-media { 855} 856 857.wt-icon-note { 858} 859 860.wt-icon-openstreetmap { 861} 862 863.wt-icon-preferences { 864} 865 866.wt-icon-reorder { 867} 868 869.wt-icon-repository { 870} 871 872.wt-icon-sex-f { 873 color: var(--sex-m-fg); 874} 875 876.wt-icon-sex-m { 877 color: var(--sex-m-fg); 878} 879 880.wt-icon-sex-u { 881 color: var(--sex-u-fg); 882} 883 884.wt-icon-sex-x { 885 color: var(--sex-u-fg); 886} 887 888.wt-icon-source { 889} 890 891.wt-icon-submitter { 892} 893 894.wt-icon-warning { 895} 896 897.wt-icon-zoom-in { 898} 899 900.wt-icon-zoom-out { 901} 902 903/* Miscellaneous images */ 904.icon-cfamily { 905} 906 907.icon-childless { 908 content: url(images/childless.png); 909} 910 911.icon-children { 912 content: url(images/children.png); 913} 914 915.icon-edit_indi { 916 content: url(minimal/images/edit_indi.png); 917} 918 919.icon-fam-list { 920 content: url(minimal/images/sfamily.png); 921} 922 923.icon-indi-list { 924 content: url(minimal/images/indis.png); 925} 926 927.icon-loading-small { 928 content: url(images/indicator.gif); 929} 930 931.icon-loading-large { 932 content: url(images/loading-32x32.gif); 933} 934 935.icon-minus { 936 content: url(icons/minus.png); 937} 938 939.icon-mypage { 940 content: url(minimal/images/mypage.png); 941} 942 943.icon-plus { 944 content: url(icons/plus.png); 945} 946 947.icon-resn-confidential { 948 content: none; 949} 950 951.icon-resn-locked { 952 content: none; 953} 954 955.icon-resn-none { 956 content: none; 957} 958 959.icon-resn-privacy { 960 content: none; 961} 962 963.icon-rings { 964 content: url(images/rings.png); 965} 966 967.icon-selected { 968 content: url(minimal/images/selected.png); 969} 970 971.icon-sfamily { 972 content: url(minimal/images/sfamily.png); 973} 974 975/* Silhouettes on charts */ 976.icon-silhouette-F { 977 content: url(minimal/images/silhouette_female_small.png); 978} 979 980.icon-silhouette-M { 981 content: url(minimal/images/silhouette_male_small.png); 982} 983 984.icon-silhouette-U { 985 content: url(minimal/images/silhouette_unknown_small.png); 986} 987 988.icon-indis { 989 content: url(minimal/images/indis.png); 990} 991 992.icon-pedigree { 993 content: url(minimal/images/pedigree.png); 994} 995 996/* Census assistant */ 997.wt-census-assistant-form-control:focus { 998 min-width: 12rem; 999} 1000 1001/* Some blocks show a reduced version on the right-hand side. */ 1002.wt-side-blocks .wt-side-block-optional { 1003 display: none !important; 1004} 1005 1006/* my page chart enhancements */ 1007.wt-block-content-charts { 1008 overflow: auto; 1009} 1010 1011/* Some charts are wider than the page. */ 1012.wt-chart { 1013 overflow-x: auto; 1014 overflow-y: hidden; 1015} 1016 1017/* Fit thumbnail into parent on charts */ 1018.select2-selection.select2-selection--single { 1019 min-height: 36px; 1020 height: auto; 1021 padding: 2px 0; 1022} 1023 1024.select2-container .select2-selection--single .select2-selection__rendered { 1025 padding-left: 2px; 1026} 1027 1028.select2-selection--single .NAME { 1029 padding-left: 4px; 1030} 1031 1032/* 1033 * These selectors control how the short horizontal lines are positioned in the Charts 1034 * Optimized for Win10 and FF, Chrome and Edge browsers 1035 * Ancestors 1036 * Descendants 1037 * amily book 1038 * 1039 */ 1040 1041/* Ascentors */ 1042.wt-chart-ancestors .linea1 { 1043 margin-bottom: 4px; 1044} 1045 1046.wt-chart-ancestors .linea2 { 1047 margin-bottom: 7px; 1048} 1049 1050.wt-chart-ancestors .linea3 { 1051 margin-bottom: 4px; 1052} 1053 1054.wt-chart-ancestors .linea4 { 1055 margin-bottom: 7px; 1056} 1057 1058.wt-chart-ancestors .linea5 { 1059 vertical-align: top; 1060} 1061 1062/* Descendants */ 1063.wt-chart-descendants .lined1 { 1064 margin-bottom: 4px; 1065} 1066 1067.wt-chart-descendants .lined2 { 1068 margin-bottom: 7px; 1069} 1070 1071.wt-chart-descendants .lined3 { 1072 margin-bottom: 4px; 1073} 1074 1075.wt-chart-descendants .lined4 { 1076 margin-bottom: 7px; 1077} 1078 1079.wt-chart-descendants .linea5 { 1080 vertical-align: top; 1081} 1082 1083/* Some menus (e.g. languages) can be longer than a page */ 1084.dropdown-menu { 1085 max-height: 30rem; 1086 overflow-x: hidden; 1087} 1088 1089/* Forms */ 1090.col-form-label { 1091 font-weight: bold; 1092} 1093