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.block { 348 background-color: #fff; 349 color: #555; 350 border: solid #ccc 1px; 351 padding: 3px; 352 vertical-align: top; 353} 354 355.blockcontent { 356 margin: 5px; 357 overflow: auto; 358} 359 360.blockcontent .list_table { 361 border-spacing: 0; 362 border: solid #555 1px; 363 border-right: 0; 364} 365 366.blockcontent .list_value, 367.blockcontent .list_value_wrap { 368 border: 0; 369 border-top: solid #555 1px; 370 border-right: solid #555 1px; 371} 372 373.blockheader { 374 font-weight: bold; 375} 376 377/* end Block styles */ 378 379.user_welcome_block table, 380.gedcom_block_block table { 381 margin: auto; 382} 383 384.user_welcome_block td, 385.gedcom_block_block td { 386 width: 33%; 387 text-align: center; 388 vertical-align: top; 389} 390 391.user_welcome_block i, 392.gedcom_block_block i { 393 background-image: none; 394 height: 0; 395 width: 0; 396} 397 398/* Table of genealogical facts */ 399.wt-facts-table caption { 400 caption-side: top; 401} 402 403.wt-facts-table th { 404 border: 1px solid #000; 405 font-weight: normal; 406 min-width: 20%; 407} 408 409.wt-facts-table td { 410 border: solid #000 1px; 411} 412 413.parentdeath { 414 padding: 1px; 415} 416 417/* ==== FAQ table styles ===== */ 418table.faq { 419 background-color: #ddd; 420 margin: 5px 0 50px 5px; 421 width: 98%; 422} 423 424table.faq tr:nth-child(odd) td { 425 background-color: #fff; 426} 427 428div.faq_title { 429 background-color: #ddd; 430 margin: 1em 0; 431 padding: .25em; 432 font-weight: bold; 433 width: 98%; 434} 435 436div.faq_body { 437 clear: both; 438 padding: 0 1em; 439} 440 441.faq_top { 442 float: right; 443} 444 445/* === Positioning edit, copy, delete links === */ 446/* General use */ 447.editfacts { 448 clear: left; 449 padding-top: 15px; 450} 451 452#indi_note { 453 margin: 0 0 5px; 454} 455 456.indi_table { 457 clear: left; 458} 459 460.label { 461 font-weight: bold; 462} 463 464#indi_note .fact_NOTE { 465 float: left; 466 margin: 0 5px 0 0; 467} 468 469#indi_note .fact_SOUR { 470 margin: 3px 0; 471} 472 473#indi_note .fact_SOUR a { 474 font-size: 100%; 475} 476 477#indi_note .fact_NOTE, 478#indi_note .fact_SOUR { 479 clear: both; 480} 481 482.odometer { 483 font-family: courier, monospace; 484 font-weight: bold; 485 background: #000; 486 color: #fff; 487} 488 489.upcoming_events_block button, 490.todays_events_block button { 491 margin: 0 20px; 492} 493 494/* Sidebar - Family navigator */ 495 496/* Sidebar - Descendants */ 497#sb_content_descendancy { 498 margin-top: 5px; 499} 500 501#sb_desc_content { 502 margin-left: 3px; 503 font-size: 0.8em; 504} 505 506#sb_desc_content ul { 507 padding: 0; 508 margin: 0; 509} 510 511.sb_desc_indi_li { 512 list-style-type: none; 513} 514 515/* Individuals and Families */ 516#sidebar-content-individuals, 517#sidebar-content-families { 518 margin-top: 5px; 519} 520 521.sb_indi_surname_li, 522.sb_fam_surname_li { 523 list-style-image: url(icons/plus.png); 524} 525 526.name_tree_div ul { 527 padding: 0; 528 margin: 0; 529} 530 531.name_tree_div li { 532 list-style: none; 533 margin: 0; 534 padding: 0; 535} 536 537/* Clippings */ 538#sb_clippings_content ul { 539 padding: 0; 540 margin: 0; 541} 542 543#sb_clippings_content li { 544 list-style: none; 545 margin: 0; 546 padding: 0; 547 white-space: nowrap; 548} 549 550/* Stories module */ 551.story_title { 552 padding-top: 12px; 553 font-size: 13px; 554 height: 32px; 555 font-weight: bold; 556} 557 558.story_body { 559 padding: 20px; 560 white-space: normal; 561} 562 563.story_edit { 564 padding: 12px; 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/* ====== Charts Styles ======== */ 585 586#people label { 587 display: block; 588} 589 590/*-- Fan chart ---- */ 591.fan_chart_menu { 592 background: #fff; 593 position: absolute; 594 display: none; 595 z-index: 100; 596} 597 598#fan_chart ul { 599 list-style-type: none; 600 margin: 0; 601} 602 603/* Lifespans chart */ 604.wt-lifespans-subtitle { 605 text-align: center; 606} 607 608.wt-lifespans-scale { 609 white-space: nowrap; 610} 611 612.wt-lifespans-decade { 613 width: 70px; 614 height: 60px; 615 display: inline-block; 616 background-image: url(images/lifespan-decade.png); 617 background-position-y: bottom; 618 background-repeat: no-repeat; 619 background-size: 70px 37px; 620} 621 622.wt-lifespans-individuals { 623 background: #fafafa; 624} 625 626.wt-lifespans-individual { 627 628} 629 630.wt-lifespans-summary { 631 background: #ffffff; 632 border: thin solid #000; 633 z-index: 1; 634} 635 636.wt-lifespans-summary-link { 637 font-weight: bold; 638} 639 640/*-- Pedigree ---- */ 641.tvertline { 642 vertical-align: bottom; 643} 644 645.optionbox, .descriptionbox { 646 border: solid #000 1px; 647 vertical-align: top; 648 padding: 3px; 649} 650 651#childbox { 652 padding: 5px; 653 position: absolute; 654 display: none; 655 text-align: start; 656 white-space: nowrap; 657 top: 20px; 658 left: 0; 659} 660 661.layout3 #childbox { 662 top: auto; 663 bottom: 20px; 664} 665 666.person0, .person1, .person2, .person3, .person4, .person5 { 667 border:outset #555 1px; 668 vertical-align:top; 669} 670.person0{ 671 background-color:#eee; 672} 673 674.person1{ 675 background-color:#bfbfbf; 676} 677 678.person2{ 679 background-color:#999; 680} 681 682.person3{ 683 background-color:#dfdfdf; 684} 685 686.person4{ 687 background-color:#eee; 688} 689 690.person5{ 691 background-color:#fefefe; 692} 693 694/*-- timeline --*/ 695#timeline_chart { 696 position: relative; 697 top: 0; 698 left: 0; 699} 700 701/* 702 * Any element that is loaded dynamically has the class wt-ajax-load. 703 * We can provide a "loading" placeholder for empty elements with this class. 704 */ 705.wt-ajax-load:empty { 706 height: 32px; 707 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 708} 709 710/* 711 * Default icons are provided by FontAwesome. 712 */ 713.wt-icon-anniversary { 714} 715 716.wt-icon-arrow-down { 717} 718 719a > .wt-icon-arrow-down:hover { 720} 721 722.wt-icon-arrow-left { 723} 724 725a > .wt-icon-arrow-left:hover { 726} 727 728.wt-icon-arrow-right { 729} 730 731a > .wt-icon-arrow-right:hover { 732} 733 734.wt-icon-arrow-up { 735} 736 737a > .wt-icon-arrow-up:hover { 738} 739 740.wt-icon-bing-maps { 741} 742 743.wt-icon-calendar { 744} 745 746.wt-icon-collapse { 747} 748 749.wt-icon-coordinates { 750} 751 752.wt-icon-copy { 753} 754 755.wt-icon-delete { 756} 757 758.wt-icon-edit { 759} 760 761.wt-icon-expand { 762} 763 764.wt-icon-family { 765} 766 767.wt-icon-google-maps { 768} 769 770.wt-icon-help { 771} 772 773.wt-icon-individual { 774} 775 776.wt-icon-keyboard { 777} 778 779.wt-icon-media { 780} 781 782.wt-icon-note { 783} 784 785.wt-icon-openstreetmap { 786} 787 788.wt-icon-preferences { 789} 790 791.wt-icon-reorder { 792} 793 794.wt-icon-repository { 795} 796 797.wt-icon-sex-f { 798 color: var(--sex-m-fg); 799} 800 801.wt-icon-sex-m { 802 color: var(--sex-m-fg); 803} 804 805.wt-icon-sex-u { 806 color: var(--sex-u-fg); 807} 808 809.wt-icon-sex-x { 810 color: var(--sex-u-fg); 811} 812 813.wt-icon-source { 814} 815 816.wt-icon-submitter { 817} 818 819.wt-icon-warning { 820} 821 822.wt-icon-zoom-in { 823} 824 825.wt-icon-zoom-out { 826} 827 828/* Miscellaneous images */ 829.icon-cfamily { 830} 831 832.icon-childless { 833 content: url(images/childless.png); 834} 835 836.icon-children { 837 content: url(images/children.png); 838} 839 840.icon-edit_indi { 841 content: url(minimal/images/edit_indi.png); 842} 843 844.icon-fam-list { 845 content: url(minimal/images/sfamily.png); 846} 847 848.icon-indi-list { 849 content: url(minimal/images/indis.png); 850} 851 852.icon-loading-small { 853 content: url(images/indicator.gif); 854} 855 856.icon-loading-large { 857 content: url(images/loading-32x32.gif); 858} 859 860.icon-minus { 861 content: url(icons/minus.png); 862} 863 864.icon-mypage { 865 content: url(minimal/images/mypage.png); 866} 867 868.icon-plus { 869 content: url(icons/plus.png); 870} 871 872.icon-resn-confidential { 873 content: none; 874} 875 876.icon-resn-locked { 877 content: none; 878} 879 880.icon-resn-none { 881 content: none; 882} 883 884.icon-resn-privacy { 885 content: none; 886} 887 888.icon-rings { 889 content: url(images/rings.png); 890} 891 892.icon-selected { 893 content: url(minimal/images/selected.png); 894} 895 896.icon-sfamily { 897 content: url(minimal/images/sfamily.png); 898} 899 900/* Silhouettes on charts */ 901.icon-silhouette-F { 902 content: url(minimal/images/silhouette_female_small.png); 903} 904 905.icon-silhouette-M { 906 content: url(minimal/images/silhouette_male_small.png); 907} 908 909.icon-silhouette-U { 910 content: url(minimal/images/silhouette_unknown_small.png); 911} 912 913.icon-indis { 914 content: url(minimal/images/indis.png); 915} 916 917.icon-pedigree { 918 content: url(minimal/images/pedigree.png); 919} 920 921/* Census assistant */ 922.wt-census-assistant-form-control:focus { 923 min-width: 12rem; 924} 925 926/* Some blocks show a reduced version on the right-hand side. */ 927.wt-side-blocks .wt-side-block-optional { 928 display: none !important; 929} 930 931/* my page chart enhancements */ 932.wt-block-content-charts { 933 overflow: auto; 934} 935 936/* Some charts are wider than the page. */ 937.wt-chart { 938 overflow-x: auto; 939 overflow-y: hidden; 940} 941 942/* Fit thumbnail into parent on charts */ 943.select2-selection.select2-selection--single { 944 min-height: 36px; 945 height: auto; 946 padding: 2px 0; 947} 948 949.select2-container .select2-selection--single .select2-selection__rendered { 950 padding-left: 2px; 951} 952 953.select2-selection--single .NAME { 954 padding-left: 4px; 955} 956 957/* 958 * These selectors control how the short horizontal lines are positioned in the Charts 959 * Optimized for Win10 and FF, Chrome and Edge browsers 960 * Ancestors 961 * Descendants 962 * amily book 963 * 964 */ 965 966/* Ascentors */ 967.wt-chart-ancestors .linea1 { 968 margin-bottom: 4px; 969} 970 971.wt-chart-ancestors .linea2 { 972 margin-bottom: 7px; 973} 974 975.wt-chart-ancestors .linea3 { 976 margin-bottom: 4px; 977} 978 979.wt-chart-ancestors .linea4 { 980 margin-bottom: 7px; 981} 982 983.wt-chart-ancestors .linea5 { 984 vertical-align: top; 985} 986 987/* Descendants */ 988.wt-chart-descendants .lined1 { 989 margin-bottom: 4px; 990} 991 992.wt-chart-descendants .lined2 { 993 margin-bottom: 7px; 994} 995 996.wt-chart-descendants .lined3 { 997 margin-bottom: 4px; 998} 999 1000.wt-chart-descendants .lined4 { 1001 margin-bottom: 7px; 1002} 1003 1004.wt-chart-descendants .linea5 { 1005 vertical-align: top; 1006} 1007 1008.wt-calendar-month { 1009 border-collapse: collapse; 1010} 1011 1012.wt-calendar-month .wt-page-options-label, 1013.wt-calendar-month .wt-page-options-value { 1014 border: solid grey thin; 1015 padding: 0.2rem; 1016} 1017 1018/* Some menus (e.g. languages) can be longer than a page */ 1019.dropdown-menu { 1020 max-height: 30rem; 1021 overflow-x: hidden; 1022} 1023 1024/* Forms */ 1025.col-form-label { 1026 font-weight: bold; 1027} 1028 1029/* Accordions */ 1030.accordion .wt-icon-expand, 1031.accordion .wt-icon-collapse { 1032 display: none; 1033} 1034 1035.accordion-button:after { 1036 display: block; 1037} 1038