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