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 <http://www.gnu.org/licenses/>. 14 */ 15 16/* The clouds theme */ 17@import "_base.css"; 18 19:root { 20 --chart-line-radius: 1rem; 21 --chart-line: solid gray thin; 22 --link-color-hover: #f00; 23 --link-color: #039; 24 --link-decoration-hover: none; 25 --link-decoration: none; 26 --sex-f-bg: #ffdddd; 27 --sex-f-fg: #aaaaaa; 28 --sex-m-bg: #ddddff; 29 --sex-m-fg: #aaaaaa; 30 --sex-u-bg: #ffffff; 31 --sex-u-fg: #aaaaaa; 32} 33 34/* Override Bootstrap formatting */ 35 36.table-given-name { 37 overflow-x: hidden; 38} 39 40.btn-link { 41 padding: 0 .25rem; 42} 43 44.container-fluid { 45 padding-left: 5px; 46 padding-right: 5px; 47} 48 49table { 50 border-collapse: separate; 51} 52 53.dropdown-menu { /* Fix dropdown on Place Lists/Place Hierarchy */ 54 z-index: 1010; 55} 56 57/* 58 * Pages have the following high-level structure: 59 * 60 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 61 * +---wt-header-wrapper 62 * | +---wt-header-container 63 * | +---wt-header-content 64 * | +---wt-accessibility-links 65 * | +---wt-site-logo 66 * | +---wt-site-title 67 * | +---wt-header-search 68 * | | +---wt-header-search-form 69 * | | +---wt-header-search-field 70 * | | +---wt-header-search-button 71 * | +---wt-secondary-navigation 72 * | | +---wt-user-menu 73 * | +---wt-primary-navigation 74 * | +---wt-genealogy-menu 75 * +---wt-main-wrapper 76 * | +---wt-main-container 77 * | +---wt-main-content 78 * | +---wt-messages 79 * | +---wt-page-title 80 * | +---wt-page-options wt-page-options-xxxxx 81 * | +---wt-page-content 82 * +---wt-footers 83 * +---wt-footer wt-footer-xxxxx 84 */ 85 86.wt-global { 87 background: #c8e7ff url(clouds/images/background.png) repeat-x fixed top left; 88 color: #006; 89} 90 91.wt-header-wrapper { 92 background: #acf url(clouds/images/clouds.png) repeat-x; 93 border-bottom: thin solid #79c; 94} 95 96.wt-header-wrapper .dropdown-item.active { 97 background-color: inherit; 98 color: inherit; 99 font-weight: bold; 100} 101 102.wt-header-container { 103 margin-top: 0.5rem; 104} 105 106.wt-header-content { 107} 108 109.wt-accessibility-links { 110} 111 112.wt-site-logo { 113 display: none; 114} 115 116.wt-site-title { 117 order: 1; 118 flex: 1 1 auto; 119 width: auto; 120 font-size: 1.5rem; 121} 122 123.wt-header-search { 124 order: 3; 125 flex: 0 0 15rem; 126} 127 128.wt-header-search-form { 129} 130 131.wt-header-search-field { 132} 133 134.wt-header-search-button { 135} 136 137.wt-secondary-navigation { 138 order: 2; 139 flex: 0 0 auto; 140 width: auto; 141 white-space: nowrap; 142} 143 144.wt-user-menu { 145 flex-wrap: nowrap; 146} 147 148.wt-user-menu .nav-link { 149 display: inline-block; 150 padding: 0.5rem; 151} 152 153.wt-user-menu .nav-item + .nav-item::before { 154 content: "|"; 155} 156 157.wt-user-menu .dropdown-toggle:after { 158 display: none; 159} 160 161.wt-user-menu .dropdown-item { 162 padding-left: 1rem; 163 padding-right: 1rem; 164} 165 166.wt-primary-navigation { 167 order: 3; 168 flex: 1 0 auto; 169} 170 171.wt-genealogy-menu { 172 display: flex; flex-wrap: wrap; 173} 174 175.wt-genealogy-menu .nav-item { 176 padding: 0 0.75rem; 177} 178 179.wt-genealogy-menu .nav-link { 180 /* All menu icons are 22px x 22px */ 181 height: calc(22px + 1rem); 182 width: 22px; 183 /* Hide text */ 184 padding: 0.5rem 0; 185 overflow: hidden; 186} 187 188.wt-genealogy-menu .dropdown-item { 189 /* Space between icons and align with submenu icons */ 190 padding: 0 5px 0 0; 191} 192 193.wt-genealogy-menu .dropdown-item::before { 194 /* All submenu icons are 22px x 22px */ 195 height: 22px; 196 width: 22px; 197 /* Align icons and text */ 198 vertical-align: text-top; 199 /* Space between icon and text */ 200 padding: 0 .25rem; 201 line-height: 1.8; 202} 203 204.wt-genealogy-menu .nav-item::before { 205 /* The size of the menu icons */ 206 width: 22px; 207 height: 22px; 208} 209 210.wt-genealogy-menu .dropdown-item::before { 211 /* The size of the submneu icons */ 212 width: 22px; 213 height: 22px; 214} 215 216.wt-genealogy-menu .dropdown-item:first-child { 217 font-weight: bold; 218 text-align: center; 219 border-bottom: solid thin #ddd; 220} 221 222.menu-tree .nav-link::before { 223 content: url(clouds/menu/tree.png); 224} 225 226.menu-tree .dropdown-item:not(:first-child)::before { 227 content: url(clouds/menu/tree-tree.png); 228} 229 230.menu-chart .nav-link::before { 231 content: url(clouds/menu/chart.png); 232} 233 234.menu-chart-ancestry::before { 235 content: url(clouds/menu/chart-ancestors.png); 236} 237 238.menu-chart-compact::before { 239 content: url(clouds/menu/chart-compact.png); 240} 241 242.menu-chart-descendants::before { 243 content: url(clouds/menu/chart-descendants.png); 244} 245 246.menu-chart-familybook::before { 247 content: url(clouds/menu/chart-family-book.png); 248} 249 250.menu-chart-fanchart::before { 251 content: url(clouds/menu/chart-fanchart.png); 252} 253 254.menu-chart-hourglass::before { 255 content: url(clouds/menu/chart-hourglass.png); 256} 257 258.menu-chart-lifespan::before { 259 content: url(clouds/menu/chart-lifespan.png); 260} 261 262.menu-chart-pedigree::before { 263 content: url(clouds/menu/chart-pedigree.png); 264} 265 266.menu-chart-pedigreemap::before { 267 content: url(clouds/menu/chart-pedigree-map.png); 268} 269 270.menu-chart-relationship::before { 271 content: url(clouds/menu/chart-relationship.png); 272} 273 274.menu-chart-statistics::before { 275 content: url(clouds/menu/chart-statistics.png); 276} 277 278.menu-chart-timeline::before { 279 content: url(clouds/menu/chart-timeline.png); 280} 281 282.menu-chart-tree::before { 283 content: url(clouds/menu/chart-tree.png); 284} 285 286.menu-list .nav-link::before { 287 content: url(clouds/menu/list.png); 288} 289 290.menu-branches::before { 291 content: url(clouds/menu/branches.png); 292} 293 294.menu-list-fam::before { 295 content: url(clouds/menu/list-fam.png); 296} 297 298.menu-list-indi::before { 299 content: url(clouds/menu/list-indi.png); 300} 301 302.menu-list-loc::before { 303 content: url(clouds/menu/list-plac.png); 304} 305 306.menu-list-note::before { 307 content: url(clouds/menu/list-note.png); 308} 309 310.menu-list-obje::before { 311 content: url(clouds/menu/list-obje.png); 312} 313 314.menu-list-plac::before { 315 content: url(clouds/menu/list-plac.png); 316} 317 318.menu-list-repo::before { 319 content: url(clouds/menu/list-repo.png); 320} 321 322.menu-list-sour::before { 323 content: url(clouds/menu/list-sour.png); 324} 325 326.menu-list-subm::before { 327 content: url(clouds/menu/list-indi.png); 328} 329 330.menu-calendar .nav-link::before { 331 content: url(clouds/menu/calendar.png); 332} 333 334.menu-calendar-day::before { 335 content: url(clouds/menu/calendar.png); 336} 337 338.menu-calendar-month::before { 339 content: url(clouds/menu/calendar.png); 340} 341 342.menu-calendar-year::before { 343 content: url(clouds/menu/calendar.png); 344} 345 346.menu-report .nav-link::before { 347 content: url(clouds/menu/report.png); 348} 349 350.menu-report .dropdown-item:not(:first-child)::before { 351 content: url(clouds/menu/report.png); 352} 353 354.menu-search .nav-link::before { 355 content: url(clouds/menu/search.png); 356} 357 358.menu-search .dropdown-item:not(:first-child)::before { 359 content: url(clouds/menu/search.png); 360} 361 362.menu-faq .nav-link::before { 363 content: url(clouds/menu/faq.png); 364} 365 366.menu-clippings .nav-link::before { 367 content: url(clouds/menu/clippings.png); 368} 369 370.menu-clippings-add::before { 371 content: url(clouds/menu/clippings-cart.png); 372} 373 374.menu-clippings-cart::before { 375 content: url(clouds/menu/clippings-cart.png); 376} 377 378.menu-clippings-download::before { 379 content: url(clouds/menu/edit-gedcom.png); 380} 381 382.menu-clippings-empty::before { 383 content: url(clouds/menu/edit-delete.png); 384} 385 386.menu-clippings-remove::before { 387 content: url(clouds/menu/edit-delete.png); 388} 389 390.menu-story .nav-link::before { 391 content: url(clouds/menu/story.png); 392} 393 394.wt-main-container { 395 /* Space between the header/footer and the main content. */ 396 padding-top: 1rem; 397 padding-bottom: 1rem; 398} 399 400.wt-main { 401} 402 403.wt-messages { 404} 405 406.wt-page-title { 407 text-align: center; 408} 409 410.wt-page-options { 411} 412 413.wt-page-options .form-group { 414 margin-bottom: 2px; 415} 416 417.wt-page-options-label { 418 color: #039; 419 background-color: #95b8e0; 420} 421 422.wt-page-options-value { 423 color: #006; 424 background-color: #ecf5ff; 425 border: thin solid #ccc; 426 padding: 0.25rem 0.75rem; 427} 428 429.wt-page-content { 430 margin-top: 1rem; 431} 432 433.wt-footers { 434} 435 436.wt-footer { 437} 438 439.wt-footer-contact { 440} 441 442.wt-footer-cookies { 443 background: #666; 444 color: #fff; 445 transition: height 0.5s; 446} 447 448.wt-footer-page-views { 449} 450 451.wt-footer-powered-by { 452} 453 454.wt-footer-powered-by-webtrees { 455 width: 100px; 456 height: 21px; 457 content: url(images/powered-by-webtrees.png); 458} 459 460/* 461 * The tree/user home pages 462 * 463 * wt-home-page / wt-user-page 464 * +---wt-main-blocks 465 * | +---wt-block, wt-block-AAA 466 * | +---wt-block, wt-block-BBB 467 * | +---wt-block, wt-block-CCC 468 * +---wt-side-blocks 469 * +---wt-block, wt-block-XXX 470 * +---wt-block, wt-block-YYY 471 * +---wt-block, wt-block-ZZZ 472 * 473 * Each block as the structure 474 * wt-block, wt-block-XXX 475 * +---wt-block-header, wt-block-header-XXX 476 * +---wt-block-content, wt-block-content-XXX 477 */ 478 479.wt-block { 480 color: #000; 481 margin-bottom: 5px; 482 padding: 1px; 483 vertical-align: top; 484} 485 486.wt-block-header { 487 background: url(clouds/images/block-header-background.png); 488 background-size: auto 100%; 489 padding: 0.25rem 0.75rem; 490 border-bottom: 0; 491} 492 493.wt-block-header::before { 494 content: url(clouds/images/block-header-disk.png); 495 margin: 0.5rem; 496} 497 498.wt-block-content { 499} 500 501.blockcontent { 502 border: solid #999 1px; 503 margin: 0 2px 10px 0; 504 overflow: auto; 505 padding: 5px; 506} 507 508.blockcontent .list_table { 509 border-spacing: 1px; 510 border: solid #999 1px; 511 border-right: 0; 512} 513 514.blockcontent .list_value, 515.blockcontent .list_value_wrap { 516 border: 0; 517 border-top: solid #999 1px; 518 border-right: solid #999 1px; 519} 520 521/* 522 * The individual page. 523 * 524 * wt-route-individual 525 * +---wt-header-wrapper 526 */ 527 528.wt-individual-silhouette { 529 content: url(images/individual-silhouette-unknown.png); 530} 531 532.wt-individual-silhouette-f { 533 content: url(images/individual-silhouette-female.png); 534} 535 536.wt-individual-silhouette-m { 537 content: url(images/individual-silhouette-male.png); 538} 539 540/* 541 * Chart-boxes are used to build the various charts. 542 * Each type of chart will set its own size and hide/show content. 543 * 544 * wt-chart-box 545 * +--- wt-chart-box-thumbnail 546 * +--- wt-chart-box-extra 547 * +--- wt-chart-box-zoom 548 * +--- wt-chart-box-icon 549 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 550 * +--- wt-chart-box-links 551 * +--- wt-chart-box-icon 552 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 553 * +--- wt-chart-box-name 554 * +--- wt-chart-box-lifespan 555 * +--- wt-chart-box-facts 556 * +--- wt-chart-box-fact 557 */ 558.wt-chart-box, 559.wt-chart-box-menu { 560 background: var(--sex-u-bg); 561 border: dashed var(--sex-u-fg) thin; 562} 563 564.wt-chart-box { 565 height: 5rem; 566 padding: 2px; 567 line-height: 1.1; 568} 569 570.wt-chart-box-f, 571.wt-chart-box-f .wt-chart-box-dropdown { 572 background: var(--sex-f-bg); 573 border: solid var(--sex-f-fg) thin; 574} 575 576.wt-chart-box-m, 577.wt-chart-box-m .wt-chart-box-dropdown { 578 background: var(--sex-m-bg); 579 border: solid var(--sex-m-fg) thin; 580} 581 582/* ====== Round Corners ======== */ 583input, 584fieldset, 585.block, 586.list_label, 587.list_label_wrap, 588.list_value, 589.list_value_wrap, 590.messagebox, 591.optionbox, 592.wt-chart-box, 593.person0, 594.person1, 595.person2, 596.person3, 597.person4, 598.person5, 599.wt-genealogy-menu ul, 600.user-menu li ul, 601footer, 602#indi_main_blocks, 603#tabs{ 604 border-radius: 3px; 605} 606 607:focus { 608 outline-style: none; 609} 610 611.flash-messages { 612 clear: both; 613 text-align: center; 614} 615 616img { 617 border: 0; 618} 619 620legend img { 621 height: 20px; 622 vertical-align: middle; 623 width: 20px; 624} 625 626img.block { 627 border: 0; 628 height: 25px; 629 vertical-align: middle; 630} 631 632.button { 633 width: 60px; 634} 635 636button:focus { 637 outline: 0; 638} 639 640.alpha_index { 641 color: #999; 642} 643 644hr { 645 margin-top: 5px; 646 border-color: #006; 647} 648 649.list_table { 650 margin: 0 auto; 651} 652 653.list_label, 654.list_label_wrap { 655 color: #fff; 656 border: 1px solid #999; 657 font-weight: bold; 658 text-align: center; 659} 660 661.list_value, 662.list_value_wrap { 663 background-color: #edf7f9; 664 border: solid #999 1px; 665 vertical-align: top; 666} 667 668.list_label, 669.list_value { 670 white-space: nowrap; 671 padding: 4px; 672} 673 674.list_label_wrap, 675.list_value_wrap { 676 white-space: normal; 677} 678 679div.fact_SHARED_NOTE { 680 clear: both; 681} 682 683/* Table of genealogical facts */ 684.wt-facts-table { 685 border-collapse: separate; 686} 687 688.wt-facts-table caption { 689 caption-side: top; 690} 691 692.wt-facts-table th { 693 background-color: #95b8e0; 694 color: #039; 695 border: 1px solid #acf; 696 border-radius: 3px; 697 font-weight: normal; 698 text-align: center; 699 min-width: 20%; 700} 701 702.wt-facts-table td { 703 background: #fff; 704 border: solid #999 1px; 705 border-radius: 3px; 706} 707 708.wt-facts-table .wt-gender-M td { 709 background-color: var(--sex-m-bg); 710} 711 712.wt-facts-table .wt-gender-F td { 713 background-color: var(--sex-f-bg); 714} 715 716.details_label { 717 font-weight: bold; 718} 719 720.date { 721 color: #039; 722} 723 724.label { 725 font-weight: bold; 726} 727 728.error { 729 color: #d00; 730 font-weight: bold; 731} 732 733.indent { 734 padding-left: 7px; 735} 736 737.parentdeath { 738 border: thin solid #888; 739 padding: 1px; 740} 741 742.journal_box { 743 padding: 3pt; 744 border: thin solid #aaa; 745 overflow: visible; 746} 747 748.news_box { 749 border-top: solid #ccc 1px; 750} 751 752.news_title { 753 color: #000; 754 font-weight: bold; 755} 756 757.news_date { 758 color: #000; 759 margin-bottom: 12px; 760} 761 762.current_day { 763 font-weight: bold; 764 font-size: 16px; 765} 766 767.cal_day { 768 font-weight: bold; 769} 770 771#user-page h1 { 772 margin: 0.25em auto 0.6em; 773} 774 775.tvertline { 776 vertical-align: bottom; 777} 778 779#childbox { 780 padding: 5px; 781 position: absolute; 782 display: none; 783 text-align: start; 784 white-space: nowrap; 785 top: 20px; 786 left: 0; 787} 788 789.layout3 #childbox { 790 top: auto; 791 bottom: 20px; 792} 793 794.person0 { 795 background-color: #ddf; 796 border: outset #999 1px; 797 vertical-align: top; 798} 799 800.person1 { 801 background-color: #afa; 802 border: outset #afa 1px; 803 vertical-align: top; 804} 805 806.person2 { 807 background-color: #faa; 808 border: outset #faa 1px; 809 vertical-align: top; 810} 811 812.person3 { 813 background-color: #aad; 814 border: outset #55f 1px; 815 vertical-align: top; 816} 817 818.person4 { 819 background-color: #f55; 820 border: outset #f55 1px; 821 vertical-align: top; 822} 823 824.person5 { 825 background-color: #5f5; 826 border: outset #5f5 1px; 827 vertical-align: top; 828} 829 830.starredname { 831 text-decoration: underline; 832} 833 834.search_hit { 835 background-color: #ff0; 836} 837 838.descriptionbox { 839 font-size: 12px; 840 border: 1px solid #ccc; 841 vertical-align: top; 842 padding: 3px; 843} 844 845.optionbox { 846 font-size: 1rem; 847 background-color: #ecf5ff; 848 color: #006; 849 border: solid #ccc 1px; 850 vertical-align: top; 851 white-space: nowrap; 852 padding: 3px; 853} 854 855.red { 856 color: #f00; 857} 858 859.wt-associate-fact, 860.wt-relation-fact, 861.wt-historic-fact { 862 opacity: 0.8; 863} 864 865.messagebox { 866 background-color: #c2ceef; 867 border: solid #ccc 1px; 868} 869 870/* ---Pending edits--- */ 871.wt-new { 872 outline: solid blue 1px; 873} 874 875.wt-old { 876 outline: solid red 1px; 877} 878 879.nowrap { 880 white-space: nowrap; 881} 882 883.wrap { 884 white-space: normal; 885} 886 887.statistics-page { 888 text-align: center; 889} 890 891.gchart { 892 border: solid #999 1px; 893} 894 895#facts_content dd { 896 float: left; 897 width: 70%; 898} 899 900/* this keeps the tag color the same when it is a link as when not */ 901 902.place { 903 padding-top: 5px; 904} 905 906.filtersH, 907.filtersF { 908 margin: 4px; 909} 910 911.filtersH img { 912 margin-bottom: 2px; 913} 914 915.list-charts { 916 text-align: center; 917} 918 919#place-hierarchy h2, 920#place-hierarchy h4 { 921 text-align: center; 922} 923 924.user_welcome_block table, 925.gedcom_block_block table { 926 margin: auto; 927} 928 929.user_welcome_block td, 930.gedcom_block_block td { 931 width: 33%; 932 text-align: center; 933 vertical-align: top; 934} 935 936/* ==== FAQ table styles ===== */ 937table.faq { 938 background-color: #eee; 939 margin: 5px 0 50px 5px; 940 width: 98%; 941} 942 943table.faq tr:nth-child(odd) td { 944 background-color: #eee; 945} 946 947div.faq_title { 948 background-color: #eee; 949 margin: 1em 0; 950 padding: .25em; 951 font-weight: bold; 952 width: 98%; 953} 954 955div.faq_body { 956 clear: both; 957 padding: 0 1em; 958} 959 960.faq_top { 961 float: right; 962} 963 964/* === Positioning edit, copy, delete links === */ 965/* General use */ 966.editfacts { 967 clear: left; 968 padding-top: 15px; 969} 970 971#indi_note { 972 margin: 0 0 5px; 973} 974 975.indi_table { 976 clear: left; 977} 978 979#indi_note .fact_NOTE { 980 float: left; 981 margin: 0 5px 0 0; 982} 983 984#indi_note .fact_SOUR { 985 margin: 3px 0; 986} 987 988#indi_note .fact_SOUR a { 989 font-size: 100%; 990} 991 992#indi_note .fact_NOTE, 993#indi_note .fact_SOUR { 994 clear: both; 995} 996 997.odometer { 998 font-family: courier, monospace; 999 font-weight: bold; 1000 background: #000; 1001 color: #fff; 1002} 1003 1004.upcoming_events_block button, 1005.todays_events_block button { 1006 margin: 0 20px; 1007} 1008 1009/* Sidebar - Family navigator */ 1010.wt-family-navigator-dropdown-heading { 1011 font-weight: bold; 1012 font-size: inherit; 1013 color: inherit; 1014} 1015 1016/* Sidebar - Descendants */ 1017#sb_content_descendancy { 1018 margin-top: 0; 1019} 1020 1021#sb_desc_content { 1022 margin-left: 3px; 1023 font-size: 0.8em; 1024} 1025 1026#sb_desc_content ul { 1027 padding: 0; 1028 margin: 0; 1029} 1030 1031.sb_desc_indi_li { 1032 list-style-type: none; 1033 margin-left: 5px; 1034} 1035 1036/* Individuals and Families */ 1037#sidebar-content-individuals, 1038#sidebar-content-families { 1039 margin-top: 0; 1040} 1041 1042.sb_indi_surname_li, 1043.sb_fam_surname_li { 1044 list-style-image: url(icons/plus.png); 1045} 1046 1047.name_tree_div ul { 1048 padding: 0; 1049 margin: 0; 1050} 1051 1052.name_tree_div li { 1053 list-style: none; 1054 margin: 0; 1055 padding: 0; 1056} 1057 1058/* Clippings */ 1059#sb_clippings_content ul { 1060 padding: 0; 1061 margin: 0; 1062} 1063 1064#sb_clippings_content li { 1065 list-style: none; 1066 margin: 0; 1067 padding: 0; 1068 white-space: nowrap; 1069} 1070 1071/* Stories module */ 1072.story_title { 1073 padding-top: 12px; 1074 font-size: 13px; 1075 height: 32px; 1076 font-weight: bold; 1077} 1078 1079.story_body { 1080 padding: 20px; 1081 white-space: normal; 1082} 1083 1084.story_edit { 1085 padding: 12px; 1086} 1087 1088/*-- Fan chart ---- */ 1089.fan_chart_menu { 1090 background: #fff; 1091 position: absolute; 1092 display: none; 1093 z-index: 100; 1094} 1095 1096#fan_chart ul { 1097 list-style-type: none; 1098 margin: 0; 1099} 1100 1101/* Lifespans chart */ 1102.wt-lifespans-subtitle { 1103 text-align: center; 1104} 1105 1106.wt-lifespans-scale { 1107 white-space: nowrap; 1108} 1109 1110.wt-lifespans-decade { 1111 width: 70px; 1112 height: 60px; 1113 display: inline-block; 1114 background-image: url(images/lifespan-decade.png); 1115 background-position-y: bottom; 1116 background-repeat: no-repeat; 1117 background-size: 70px 37px; 1118} 1119 1120.wt-lifespans-individuals { 1121 background: #fafafa; 1122} 1123 1124.wt-lifespans-individual { 1125 1126} 1127 1128.wt-lifespans-summary { 1129 background: #ffffff; 1130 border: thin solid #000; 1131 z-index: 1; 1132} 1133 1134.wt-lifespans-summary-link { 1135 font-weight: bold; 1136} 1137 1138/*-- timeline --*/ 1139#timeline_chart { 1140 position: relative; 1141 top: 0; 1142 left: 0; 1143} 1144 1145[class^="icon-"], 1146[class*=" icon-"] { 1147 display: inline-block; 1148 vertical-align: middle; 1149 background-repeat: no-repeat; 1150 background-size: cover; 1151} 1152 1153.icon-cfamily { 1154 content: url(clouds/images/cfamily.png); 1155} 1156 1157.icon-childless { 1158 content: url(images/childless.png); 1159} 1160 1161.icon-children { 1162 content: url(images/children.png); 1163} 1164 1165.icon-edit_indi { 1166 content: url(clouds/images/edit_indi.png); 1167} 1168 1169.icon-fam-list { 1170 content: url(clouds/images/sfamily.png); 1171} 1172 1173.icon-indi-list { 1174 content: url(clouds/images/indis.png); 1175} 1176 1177.icon-loading-small { 1178 content: url(images/indicator.gif); 1179} 1180 1181.icon-minus { 1182 content: url(icons/minus.png); 1183} 1184 1185.icon-mypage { 1186 content: url(clouds/images/mypage.png); 1187} 1188 1189.icon-plus { 1190 content: url(icons/plus.png); 1191} 1192 1193.icon-resn-confidential { 1194 content: url(images/resn_confidential.png); 1195} 1196 1197.icon-resn-locked { 1198 content: url(images/resn_locked.png); 1199} 1200 1201.icon-resn-none { 1202 content: url(images/resn_none.png); 1203} 1204 1205.icon-resn-privacy { 1206 content: url(images/resn_privacy.png); 1207} 1208 1209.icon-rings { 1210 content: url(images/rings.png); 1211} 1212 1213.icon-selected { 1214 content: url(clouds/images/selected.png); 1215} 1216 1217/* Silhouettes on charts */ 1218.icon-silhouette-F { 1219 content: url(clouds/images/silhouette_female_small.png); 1220} 1221 1222.icon-silhouette-M { 1223 content: url(clouds/images/silhouette_male_small.png); 1224} 1225 1226.icon-silhouette-U { 1227 content: url(clouds/images/silhouette_unknown_small.png); 1228} 1229 1230/* Tbl hdrs and Light Text */ 1231.descriptionbox, 1232.list_label, 1233.list_label a { 1234 background-color: #95b8e0; 1235 color: #039; 1236} 1237 1238/* Base Color */ 1239.blockcontent, 1240.list_value, 1241.list_value_wrap, 1242.news_box { 1243 background: inherit; 1244} 1245 1246footer .error { 1247 color: #d00; 1248 font-weight: bold; 1249} 1250 1251.user_links { 1252 white-space: nowrap; 1253} 1254 1255/* 1256 * Any element that is loaded dynamically has the class wt-ajax-load. 1257 * We can provide a "loading" placeholder for empty elements with this class. 1258 */ 1259.wt-ajax-load:empty { 1260 height: 32px; 1261 background: url(images/loading-32x32.gif) no-repeat 50% 50%; 1262} 1263 1264/* 1265 * Default icons are provided by FontAwesome. 1266 */ 1267.wt-icon-anniversary { 1268 content: url(icons/anniversary.png); 1269} 1270 1271.wt-icon-arrow-down { 1272 content: url(clouds/icons/arrow-down.png); 1273} 1274 1275a > .wt-icon-arrow-down:hover { 1276 content: url(clouds/icons/arrow-down-hover.png); 1277} 1278 1279.wt-icon-arrow-left { 1280 content: url(clouds/icons/arrow-left.png); 1281} 1282 1283a > .wt-icon-arrow-left:hover { 1284 content: url(clouds/icons/arrow-left-hover.png); 1285} 1286 1287.wt-icon-arrow-right { 1288 content: url(clouds/icons/arrow-right.png); 1289} 1290 1291a > .wt-icon-arrow-right:hover { 1292 content: url(clouds/icons/arrow-right-hover.png); 1293} 1294 1295.wt-icon-arrow-up { 1296 content: url(clouds/icons/arrow-up.png); 1297} 1298 1299a > .wt-icon-arrow-up:hover { 1300 content: url(clouds/icons/arrow-up-hover.png); 1301} 1302 1303.wt-icon-bing-maps { 1304 content: url(icons/bing-maps.png); 1305} 1306 1307.wt-icon-calendar { 1308 content: url(icons/calendar.png) 1309} 1310 1311.wt-icon-collapse { 1312} 1313 1314.wt-icon-coordinates { 1315 content: url(icons/coordinates.png) 1316} 1317 1318.wt-icon-copy { 1319 content: url(icons/copy.png) 1320} 1321 1322.wt-icon-delete { 1323 content: url(icons/delete.png); 1324} 1325 1326.wt-icon-edit { 1327 content: url(icons/edit.png); 1328} 1329 1330.wt-icon-expand { 1331} 1332 1333.wt-icon-family { 1334 content: url(icons/family.png); 1335} 1336 1337.wt-icon-google-maps { 1338 content: url(icons/google-maps.png); 1339} 1340 1341.wt-icon-help { 1342 content: url(clouds/icons/help.png); 1343} 1344 1345.wt-icon-individual { 1346 content: url(icons/individual.png); 1347} 1348 1349.wt-icon-keyboard { 1350 content: url(icons/keyboard.png); 1351} 1352 1353.wt-icon-media { 1354 content: url(icons/media.png); 1355} 1356 1357.wt-icon-note { 1358 content: url(icons/note.png); 1359} 1360 1361.wt-icon-openstreetmap { 1362 content: url(icons/openstreetmap.png); 1363} 1364 1365.wt-icon-preferences { 1366 content: url(clouds/icons/preferences.png); 1367} 1368 1369.wt-icon-reorder { 1370 content: url(icons/reorder.png); 1371} 1372 1373.wt-icon-repository { 1374 content: url(icons/repository.png); 1375} 1376 1377.wt-icon-sex { 1378 height: 1em; 1379} 1380 1381.wt-icon-sex-f { 1382 content: url(icons/sex-female.png); 1383} 1384 1385.wt-icon-sex-m { 1386 content: url(icons/sex-male.png); 1387} 1388 1389.wt-icon-sex-u { 1390 content: url(icons/sex-unknown.png); 1391} 1392 1393.wt-icon-sex-x { 1394 content: url(icons/sex-unknown.png); 1395} 1396 1397.wt-icon-source { 1398 content: url(icons/source.png); 1399} 1400 1401.wt-icon-submitter { 1402 content: url(icons/individual.png); 1403} 1404 1405.wt-icon-warning { 1406 content: url(icons/warning.png); 1407} 1408 1409.wt-icon-zoom-in { 1410 content: url(clouds/icons/zoom-in.png); 1411} 1412 1413.wt-icon-zoom-out { 1414 content: url(clouds/icons/zoom-out.png); 1415} 1416 1417/* Miscellaneous images */ 1418.icon-indis { 1419 content: url(clouds/images/indis.png); 1420} 1421 1422.icon-patriarch { 1423 content: url(clouds/images/patriarch.png); 1424} 1425 1426.icon-pedigree { 1427 content: url(clouds/images/pedigree.png); 1428} 1429 1430.icon-sfamily { 1431 content: url(clouds/images/sfamily.png); 1432} 1433 1434.icon-user_add { 1435 content: url(clouds/images/user_add.png); 1436} 1437 1438/* Census assistant */ 1439.wt-census-assistant-form-control:focus { 1440 min-width: 12rem; 1441} 1442 1443/* Some blocks show a reduced version on the right-hand side. */ 1444.wt-side-blocks .wt-side-block-optional { 1445 display: none !important; 1446} 1447 1448/* my page chart enhancements */ 1449.wt-block-content-charts { 1450 overflow: auto; 1451} 1452 1453/* Some charts are wider than the page. */ 1454.wt-chart { 1455 overflow-x: auto; 1456 overflow-y: hidden; 1457} 1458 1459/* Fit thumbnail into parent on charts */ 1460.select2-selection.select2-selection--single { 1461 min-height: 36px; 1462 height: auto; 1463 padding: 2px 0; 1464} 1465 1466.select2-container .select2-selection--single .select2-selection__rendered { 1467 padding-left: 2px; 1468} 1469 1470.select2-selection--single .NAME { 1471 padding-left: 4px; 1472} 1473 1474/* Some menus (e.g. languages) can be longer than a page */ 1475.dropdown-menu { 1476 max-height: 30rem; 1477 overflow-x: hidden; 1478} 1479 1480/* Forms */ 1481.col-form-label { 1482 font-weight: bold; 1483} 1484