/** * webtrees: online genealogy * Copyright (C) 2022 webtrees development team * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ /* The webtrees theme */ @import "_base.css"; :root { --chart-line-radius: 1rem; --chart-line: solid gray thin; --link-color-hover: #f00; --link-color: #555; --link-decoration-hover: none; --link-decoration: none; --sex-f-bg: #e9daf1; --sex-f-fg: #ff2080; --sex-m-bg: #edf7fd; --sex-m-fg: #81a9cb; --sex-u-bg: #cceecc; --sex-u-fg: #559955; --sex-x-bg: #fceaa1; --sex-x-fg: #ffab57; } /* Override Bootstrap formatting */ .btn-link { padding-left: 0.25rem; padding-right: 0.25rem; } .table-given-name { overflow-x: hidden; } .container-fluid { padding-left: 5px; padding-right: 5px; } table { border-collapse: separate; } /* * Pages have the following high-level structure: * * wt-global wt-theme- wt-route- * +---wt-header-wrapper * | +---wt-header-container * | +---wt-header-content * | +---wt-accessibility-links * | +---wt-site-logo * | +---wt-site-title * | +---wt-header-search * | | +---wt-header-search-form * | | +---wt-header-search-field * | | +---wt-header-search-button * | +---wt-secondary-navigation * | | +---wt-user-menu * | +---wt-primary-navigation * | +---wt-genealogy-menu * +---wt-main-wrapper * | +---wt-main-container * | +---wt-main-content * | +---wt-messages * | +---wt-page-title * | +---wt-page-options wt-page-options-xxxxx * | +---wt-page-content * +---wt-footers * +---wt-footer wt-footer-xxxxx */ .wt-global { color: #555; } .wt-header-wrapper { } .wt-header-container { } .wt-header-content { } .wt-accessibility-links { } .wt-site-logo { order: 1; flex: 0 0 272px; } .wt-site-logo:after { height: 50px; width: 242px; content: url(webtrees/images/webtrees.png); } .wt-site-title { order: 3; flex: 0 0 calc(100% - 15rem); font-size: 1.5rem; font-weight: normal; } .wt-header-search { order: 4; flex: 0 0 15rem; position: relative; top: -0.75rem; } .wt-header-search-form { } .wt-header-search-field { } .wt-header-search-button { } .wt-secondary-navigation { order: 2; flex: 1 0 auto; width: auto; white-space: nowrap; margin-bottom: 15px; } .wt-user-menu { flex-wrap: nowrap; justify-content: flex-end; } .wt-user-menu .nav-link { display: inline-block; padding: 0.5rem; } .wt-user-menu .nav-item + .nav-item::before { content: "|"; } .wt-user-menu .dropdown-toggle::after { display: none; } .wt-primary-navigation { order: 5; /* Extend to full page width */ flex: 0 0 100vw; max-width: 100vw; /* Recalculate margins for content */ margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%); border-bottom: 2px solid #81a9cb; border-top: 2px solid #81a9cb; } .wt-genealogy-menu { justify-content: center; } .wt-genealogy-menu .nav-item { text-align: center; min-width: 5rem; } .wt-genealogy-menu .nav-link::before { display: block; } .wt-genealogy-menu .dropdown-toggle::after { display: none; } .wt-genealogy-menu .dropdown-menu { border-radius: 0; border: thin solid #aaa; } .wt-genealogy-menu .dropdown-item { /* Space between icons and align with submenu icons */ padding: 0 5px 0 0; line-height: 1.0; } .wt-genealogy-menu .dropdown-item::before { vertical-align: text-top; line-height: 2.4; padding: 0 .25rem; } .menu-tree .nav-link::before { content: url(webtrees/menu/tree.png); } .menu-tree .dropdown-item::before { content: url(webtrees/menu/tree-tree.png); } .menu-chart .nav-link::before { content: url(webtrees/menu/chart.png); } .menu-chart-ancestry::before { content: url(webtrees/menu/chart-ancestors.png); } .menu-chart-compact::before { content: url(webtrees/menu/chart-compact.png); } .menu-chart-descendants::before { content: url(webtrees/menu/chart-descendants.png); } .menu-chart-familybook::before { content: url(webtrees/menu/chart-family-book.png); } .menu-chart-fanchart::before { content: url(webtrees/menu/chart-fanchart.png); } .menu-chart-hourglass::before { content: url(webtrees/menu/chart-hourglass.png); } .menu-chart-lifespan::before { content: url(webtrees/menu/chart-lifespan.png); } .menu-chart-pedigree::before { content: url(webtrees/menu/chart-pedigree.png); } .menu-chart-pedigreemap::before { content: url(webtrees/menu/chart-pedigree-map.png); } .menu-chart-relationship::before { content: url(webtrees/menu/chart-relationship.png); } .menu-chart-statistics::before { content: url(webtrees/menu/chart-statistics.png); } .menu-chart-timeline::before { content: url(webtrees/menu/chart-timeline.png); } .menu-chart-tree::before { content: url(webtrees/menu/chart-tree.png); } .menu-list .nav-link::before { content: url(webtrees/menu/list.png); } .menu-branches::before { content: url(webtrees/menu/branches.png); } .menu-list-fam::before { content: url(webtrees/menu/list-fam.png); } .menu-list-indi::before { content: url(webtrees/menu/list-indi.png); } .menu-list-loc::before { content: url(webtrees/menu/list-plac.png); } .menu-list-note::before { content: url(webtrees/menu/list-note.png); } .menu-list-obje::before { content: url(webtrees/menu/list-obje.png); } .menu-list-plac::before { content: url(webtrees/menu/list-plac.png); } .menu-list-repo::before { content: url(webtrees/menu/list-repo.png); } .menu-list-sour::before { content: url(webtrees/menu/list-sour.png); } .menu-list-subm::before { content: url(webtrees/menu/list-indi.png); } .menu-calendar .nav-link::before { content: url(webtrees/menu/calendar.png); } .menu-calendar-day::before { content: url(webtrees/menu/calendar-calendar.png); } .menu-calendar-month::before { content: url(webtrees/menu/calendar-calendar.png); } .menu-calendar-year::before { content: url(webtrees/menu/calendar-calendar.png); } .menu-report .nav-link::before { content: url(webtrees/menu/report.png); } .menu-report .dropdown-item::before { content: url(webtrees/menu/report-report.png); } .menu-search .nav-link::before { content: url(webtrees/menu/search.png); } .menu-search .dropdown-item::before { content: url(webtrees/menu/search-search.png); } .menu-faq .nav-link::before { content: url(webtrees/menu/faq.png); } .menu-clippings .nav-link::before { content: url(webtrees/menu/clippings.png); } .menu-clippings-add::before { content: url(webtrees/menu/clippings-add.png); } .menu-clippings-cart::before { content: url(webtrees/menu/clippings-cart.png); } .menu-clippings-download::before { content: url(webtrees/menu/edit-preferences.png); } .menu-clippings-empty::before { content: url(webtrees/menu/edit-delete.png); } .menu-story .nav-link::before { content: url(webtrees/menu/story.png); } .wt-main-container { /* Space between the header/footer and the main content. */ padding-top: 1rem; padding-bottom: 1rem; } .wt-main { } .wt-messages { } .wt-page-title { color: #006; font-size: 1.5rem; font-weight: bold; text-align: center; } .wt-page-options { } .wt-page-content { } .wt-page-options .form-group { margin-bottom: 2px; } .wt-page-options-label { color: #fff; background-color: #81a9cb; font-weight: bold; border-left: 2px solid transparent; border-right: 2px solid transparent; } .wt-page-options-value { background-color: #edf7f9; border: solid #81a9cb 1px; padding: 0.25rem 0.75rem; } .wt-page-content { margin-top: 1rem; } .wt-footers { } .wt-footer { } .wt-footer-contact { } .wt-footer-cookies { background: #aaa; color: #fff; transition: height 0.5s; } .wt-footer-page-views { } .wt-footer-powered-by { } .wt-footer-powered-by-webtrees { width: 100px; height: 21px; content: url(images/powered-by-webtrees.png); } /* * The tree/user home pages * * wt-home-page / wt-user-page * +---wt-main-blocks * | +---wt-block, wt-block-AAA * | +---wt-block, wt-block-BBB * | +---wt-block, wt-block-CCC * +---wt-side-blocks * +---wt-block, wt-block-XXX * +---wt-block, wt-block-YYY * +---wt-block, wt-block-ZZZ * * Each block as the structure * wt-block, wt-block-XXX * +---wt-block-header, wt-block-header-XXX * +---wt-block-content, wt-block-content-XXX */ .wt-block { background-color: #edf7fd; border: solid #81a9cb 1px; } .wt-block-header { background-color: #edf7fd; border-bottom: none; font-weight: bold; } .wt-block-content { } .wt-block-content .list_table { border-spacing: 1px; border: solid #81a9cb 1px; border-right: 0; } .wt-block-content .list_value, .wt-block-content .list_value_wrap { border: 0; border-top: solid #81a9cb 1px; border-right: solid #81a9cb 1px; } /* * The individual page. * * wt-route-individual * +---wt-header-wrapper */ .wt-individual-silhouette-f { content: url(images/individual-silhouette-female.png); } .wt-individual-silhouette-m { content: url(images/individual-silhouette-male.png); } .wt-individual-silhouette-u, .wt-individual-silhouette-x { content: url(images/individual-silhouette-unknown.png); } /* * Chart-boxes are used to build the various charts. * Each type of chart will set its own size and hide/show content. * * wt-chart-box * +--- wt-chart-box-thumbnail * +--- wt-chart-box-extra * +--- wt-chart-box-zoom * +--- wt-chart-box-icon * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown * +--- wt-chart-box-links * +--- wt-chart-box-icon * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown * +--- wt-chart-box-name * +--- wt-chart-box-lifespan * +--- wt-chart-box-facts * +--- wt-chart-box-fact */ .wt-chart-box { height: 5rem; padding: 2px; line-height: 1.1; } .wt-chart-box-f, .wt-chart-box-f .wt-chart-box-dropdown { background: var(--sex-f-bg); border: solid var(--sex-f-fg) thin; } .wt-chart-box-m, .wt-chart-box-m .wt-chart-box-dropdown { background: var(--sex-m-bg); border: solid var(--sex-m-fg) thin; } .wt-chart-box-u, .wt-chart-box-u .wt-chart-box-dropdown { background: var(--sex-u-bg); border: solid var(--sex-u-fg) thin; } .wt-chart-box-x, .wt-chart-box-x .wt-chart-box-dropdown { background: var(--sex-x-bg); border: solid var(--sex-x-fg) thin; } :focus { outline-style: none; } .flash-messages { clear: both; text-align: center; } img { border: 0; } legend img { height: 20px; vertical-align: middle; width: 20px; } img.block { border: 0; height: 25px; vertical-align: middle; } .button { width: 60px; } .alpha_index { color: #999; } .news_box:target, #gedcom_stats:target { background-color: #ffc; } /* families tab person box */ table.center { margin-left: auto; margin-right: auto; } .list_table { margin: 0 auto; } .list_label, .list_label_wrap { color: #fff; background-color: #81a9cb; font-weight: bold; text-align: center; } .list_value, .list_value_wrap { background-color: #edf7f9; border: solid #81a9cb 1px; vertical-align: top; padding: 4px; } .list_label, .list_value { white-space: nowrap; } .list_label_wrap, .list_value_wrap { white-space: normal; } div.fact_SHARED_NOTE { clear: both; } /* Table of genealogical facts */ .wt-facts-table caption { caption-side: top; } .wt-facts-table th { background-color: #81a9cb; border: solid #81a9cb 1px; text-align: center; font-weight: normal; min-width: 20%; } .wt-facts-table td { background-color: #edf7fd; border: 1px solid #81a9cb; } .wt-facts-table .wt-sex-f > td { background-color: var(--sex-f-bg); border: solid #81a9cb thin; } .wt-facts-table .wt-sex-m > td { background-color: var(--sex-m-bg); border: solid var(--sex-m-fg) thin; } .wt-facts-table .wt-sex-u > td { background-color: var(--sex-u-bg); border: solid var(--sex-u-fg) thin; } .wt-facts-table .wt-sex-x > td { background-color: var(--sex-x-bg); border: solid var(--sex-x-fg) thin;; } .details_label { font-weight: bold; } .date { color: #337; } .label { font-weight: bold; } .error { color: #d00; font-weight: bold; } .indent { padding-left: 20px; } .parentdeath { border: thin solid #888; padding: 1px; } .journal_box { padding: 3pt; border: thin solid #aaa; overflow: visible; } .news_box { background-color: #edf7fd; border-top: solid #81a9cb 1px; } .news_title { font-weight: bold; } .news_date { margin-bottom: 12px; } .current_day { font-weight: bold; font-size: 16px; } .cal_day { font-weight: bold; } .rtl_cal_day { color: #00f; font-weight: bold; } #user-page h1 { margin: 0.25em auto 0.6em; } .tvertline { vertical-align: bottom; } #childbox { padding: 5px; position: absolute; display: none; text-align: start; white-space: nowrap; top: 20px; left: 0; } .layout3 #childbox { top: auto; bottom: 20px; } .person0 { background-color: #aaf; border: outset #aaf 1px; vertical-align: top; } .person1 { background-color: #afa; border: outset #afa 1px; vertical-align: top; } .person2 { background-color: #faa; border: outset #faa 1px; vertical-align: top; } .person3 { background-color: #55f; border: outset #55f 1px; vertical-align: top; } .person4 { background-color: #f55; border: outset #f55 1px; vertical-align: top; } .person5 { background-color: #5f5; border: outset #5f5 1px; vertical-align: top; } .starredname { text-decoration: underline; } .search_hit { background-color: #ff0; } .descriptionbox { color: #fff; font-size: 12px; background-color: #81a9cb; border: solid #81a9cb 1px; vertical-align: top; padding: 3px; } .optionbox { background-color: #d1d9ef; font-size: 1rem; border: solid #81a9cb 1px; vertical-align: top; white-space: nowrap; padding: 3px; } .red { color: #f00; } .wt-associate-fact, .wt-relation-fact, .wt-historic-fact { opacity: 0.8; } .messagebox { background-color: #c2ceef; border: solid #81a9cb 1px; } /* ---Pending edits--- */ .wt-new { outline: solid blue 1px; } .wt-old { outline: solid red 1px; } .nowrap { white-space: nowrap; } .wrap { white-space: normal; } .statistics-page { text-align: center; } .gchart { border: solid #81a9cb 1px; } #facts_content dd { float: left; width: 70%; } td.descriptionbox a { color: #fff; } .filtersH, .filtersF { margin: 4px; } .filtersH img { margin-bottom: 2px; } .list-charts { text-align: center; } #place-hierarchy h2, #place-hierarchy h4 { text-align: center; } /* ==== FAQ table styles ===== */ table.faq { background-color: #e0e0e0; margin: 5px 0 50px 5px; width: 98%; } table.faq tr:nth-child(odd) td { background-color: #e7eef3; } div.faq_title { background-color: #e0e0e0; margin: 1em 0; padding: .25em; font-weight: bold; width: 98%; } div.faq_body { clear: both; padding: 0 1em; } .faq_top { float: right; } #indi_note { margin: 0 0 5px; } .indi_table { clear: left; } #indi_note .fact_NOTE { float: left; margin: 0 5px 0 0; } #indi_note .fact_SOUR { margin: 3px 0; } #indi_note .fact_SOUR a { font-size: 100%; } #indi_note .fact_NOTE, #indi_note .fact_SOUR { clear: both; } .odometer { font-family: courier, monospace; font-weight: bold; background: #000; color: #fff; } /* Sidebar - Family navigator */ .wt-family-navigator-dropdown { background: #edf7fd; } .wt-family-navigator-dropdown-heading { font-weight: bold; font-size: inherit; color: inherit; } /* Sidebar - Descendants */ #sb_content_descendancy { margin-top: 5px; } #sb_desc_content { margin-left: 3px; font-size: 0.8em; } #sb_desc_content ul { padding: 0; margin: 0; } .sb_desc_indi_li { list-style-type: none; } /* Individuals and Families */ #sidebar-content-individuals, #sidebar-content-families { margin-top: 5px; } .sb_indi_surname_li, .sb_fam_surname_li { list-style-image: url(icons/plus.png); } .name_tree_div ul { padding: 0; margin: 0; } .name_tree_div li { list-style: none; margin: 0; padding: 0; } /* Clippings */ #sb_clippings_content ul { padding: 0; margin: 0; } #sb_clippings_content li { list-style: none; margin: 0; padding: 0; white-space: nowrap; } /* Stories module */ .story_title { padding-top: 12px; font-size: 13px; height: 32px; font-weight: bold; } .story_body { padding: 20px; white-space: normal; } .story_edit { padding: 12px; } /*-- Fan chart ---- */ .fan_chart_menu { background: #fff; position: absolute; display: none; z-index: 100; } #fan_chart ul { list-style-type: none; margin: 0; } /* Lifespans chart */ .wt-lifespans-subtitle { text-align: center; } .wt-lifespans-scale { white-space: nowrap; } .wt-lifespans-decade { width: 70px; height: 60px; display: inline-block; background-image: url(images/lifespan-decade.png); background-position-y: bottom; background-repeat: no-repeat; background-size: 70px 37px; } .wt-lifespans-individuals { background: #fafafa; } .wt-lifespans-individual { } .wt-lifespans-summary { background: #ffffff; border: thin solid #000; z-index: 1; } .wt-lifespans-summary-link { font-weight: bold; } /*-- timeline --*/ #timeline_chart { position: relative; top: 0; left: 0; } /* * Any element that is loaded dynamically has the class wt-ajax-load. * We can provide a "loading" placeholder for empty elements with this class. */ .wt-ajax-load:empty { height: 32px; background: url(images/loading-32x32.gif) no-repeat 50% 50%; } /* * Default icons are provided by FontAwesome. */ .wt-icon-anniversary { content: url(icons/anniversary.png); } .wt-icon-arrow-down { content: url(webtrees/icons/arrow-down.png); } a > .wt-icon-arrow-down:hover { content: url(webtrees/icons/arrow-down-hover.png); } .wt-icon-arrow-left { content: url(webtrees/icons/arrow-left.png); } a > .wt-icon-arrow-left:hover { content: url(webtrees/icons/arrow-left-hover.png); } .wt-icon-arrow-right { content: url(webtrees/icons/arrow-right.png); } a > .wt-icon-arrow-right:hover { content: url(webtrees/icons/arrow-right-hover.png); } .wt-icon-arrow-up { content: url(webtrees/icons/arrow-up.png); } a > .wt-icon-arrow-up:hover { content: url(webtrees/icons/arrow-up-hover.png); } .wt-icon-bing-maps { content: url(icons/bing-maps.png); } .wt-icon-calendar { content: url(icons/calendar.png) } .wt-icon-collapse { } .wt-icon-coordinates { content: url(icons/coordinates.png) } .wt-icon-copy { content: url(icons/copy.png) } .wt-icon-delete { content: url(icons/delete.png); } .wt-icon-edit { content: url(icons/edit.png); } .wt-icon-expand { } .wt-icon-family { content: url(icons/family.png); } .wt-icon-google-maps { content: url(icons/google-maps.png); } .wt-icon-help { content: url(webtrees/icons/help.png); } .wt-icon-individual { content: url(icons/individual.png); } .wt-icon-keyboard { content: url(icons/keyboard.png); } .wt-icon-media { content: url(icons/media.png); } .wt-icon-note { content: url(icons/note.png); } .wt-icon-openstreetmap { content: url(icons/openstreetmap.png); } .wt-icon-preferences { content: url(webtrees/icons/preferences.png); } .wt-icon-reorder { content: url(icons/reorder.png); } .wt-icon-repository { content: url(icons/repository.png); } .wt-icon-sex { height: 1em; } .wt-icon-sex-f { content: url(icons/sex-female.png); } .wt-icon-sex-m { content: url(icons/sex-male.png); } .wt-icon-sex-u { content: url(icons/sex-unknown.png); } .wt-icon-sex-x { content: url(icons/sex-unknown.png); } .wt-icon-source { content: url(icons/source.png); } .wt-icon-submitter { content: url(icons/individual.png); } .wt-icon-warning { content: url(icons/warning.png); } .wt-icon-zoom-in { content: url(webtrees/icons/zoom-in.png); } .wt-icon-zoom-out { content: url(webtrees/icons/zoom-out.png); } /* Miscellaneous images */ .icon-cfamily { content: url(webtrees/images/family.png); } .icon-childless { content: url(images/childless.png); } .icon-children { content: url(images/children.png); } .icon-edit_indi { content: url(webtrees/images/edit_indi.png); } .icon-fam-list { content: url(webtrees/images/family.png); } .icon-indi-list { content: url(webtrees/images/indis.png); } .icon-loading-small { content: url(images/indicator.gif); } .icon-minus { content: url(icons/minus.png); } .icon-mypage { content: url(webtrees/images/mypage.png); } .icon-plus { content: url(icons/plus.png); } .icon-resn-confidential { content: url(images/resn_confidential.png); } .icon-resn-locked { content: url(images/resn_locked.png); } .icon-resn-none { content: url(images/resn_none.png); } .icon-resn-privacy { content: url(images/resn_privacy.png); } .icon-rings { content: url(images/rings.png); } .icon-selected { content: url(webtrees/images/selected.png); } /* Silhouettes on charts */ .icon-silhouette-f { content: url(webtrees/images/silhouette_female_small.png); } .icon-silhouette-m { content: url(webtrees/images/silhouette_male_small.png); } .icon-silhouette-u, .icon-silhouette-x { content: url(webtrees/images/silhouette_unknown_small.png); } .icon-indis { content: url(webtrees/images/indis.png); } .icon-patriarch { content: url(webtrees/images/patriarch.png); } .icon-pedigree { content: url(webtrees/images/pedigree.png); } .icon-sfamily { content: url(webtrees/images/family.png); } .icon-user_add { content: url(webtrees/images/user_add.png); } /* Census assistant */ .wt-census-assistant-form-control:focus { min-width: 12rem; } /* Some blocks show a reduced version on the right-hand side. */ .wt-side-blocks .wt-side-block-optional { display: none !important; } /* my page chart enhancements */ .wt-block-content-charts { overflow: auto; } /* Some charts are wider than the page. */ .wt-chart { overflow-x: auto; overflow-y: hidden; } /* Some menus (e.g. languages) can be longer than a page */ .dropdown-menu { max-height: 30rem; overflow-x: hidden; } /* Forms */ .col-form-label { font-weight: bold; }