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