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