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