1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2023 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 colors theme is based on the clouds theme */ 17@import "clouds.css"; 18 19:root { 20 --link-color: #333; 21} 22 23/* Override Bootstrap formatting */ 24 25.card-header h4 { 26 font-size: 1.2rem; 27} 28 29.btn.focus, .btn:focus { 30 box-shadow: none; 31} 32 33.btn-link:hover, .btn-link:focus { 34 color: #f00; 35 text-decoration: none; 36} 37 38.pagination, .page-link, .page-link:hover, .page-link:focus { 39 border-color: #e6e6e6; 40 color: #555; 41} 42 43.page-item.active .page-link { 44 background-color: #e6e6e6; 45 color: #555; 46 border-color: #ccc; 47} 48 49.form-control:focus{ 50 border-color:#ccc; 51 box-shadow:0 0 0 .2rem rgba(128,128,128,.25); 52} 53 54/* fit primary and secondary menus on mobile devices */ 55@media (max-width: 500px) { 56 .wt-genealogy-menu .nav-item { 57 padding: 0 0.45rem!important; 58 } 59 .wt-user-menu .nav-link { 60 padding: 0.25rem!important; 61 } 62} 63 64/* 65 * Pages have the following high-level structure: 66 * 67 * wt-global wt-theme-<THEME> wt-route-<ROUTE> 68 * +---wt-header-wrapper 69 * | +---wt-header-container 70 * | +---wt-header-content 71 * | +---wt-accessibility-links 72 * | +---wt-site-logo 73 * | +---wt-site-title 74 * | +---wt-header-search 75 * | | +---wt-header-search-form 76 * | | +---wt-header-search-field 77 * | | +---wt-header-search-button 78 * | +---wt-secondary-navigation 79 * | | +---wt-user-menu 80 * | +---wt-primary-navigation 81 * | +---wt-genealogy-menu 82 * +---wt-main-wrapper 83 * | +---wt-main-container 84 * | +---wt-main-content 85 * | +---wt-messages 86 * | +---wt-page-title 87 * | +---wt-page-options wt-page-options-xxxxx 88 * | +---wt-page-content 89 * +---wt-footers 90 * +---wt-footer wt-footer-xxxxx 91 */ 92 93::backdrop, .wt-global { 94 background: #fff; 95 color: #333; 96} 97 98.wt-header-wrapper, .btn-primary { 99 background: var(--color-1); 100 border: 0; 101 color: var(--color-5); 102} 103 104.btn-primary, 105.btn-primary:focus { 106 background: var(--color-1); 107} 108 109.btn-primary:hover { 110 background: var(--color-2); 111} 112 113.wt-site-title { 114 padding: 0.75rem 0.75rem 0; 115} 116 117.wt-header-search { 118 padding-bottom: 0.5rem; 119} 120 121.wt-user-menu .nav-link { 122 color: inherit; /* Inherit from wt-header-container */ 123} 124 125.wt-user-menu .menu-color .dropdown-menu { 126 max-height: 60rem; 127} 128 129.wt-primary-navigation { 130 order: 4; 131 flex: 0 0 100%; 132} 133 134.wt-genealogy-menu { 135 background: var(--color-2); 136 /* Extend to full page width */ 137 flex: 0 1 100vw; 138 /* Recalculate margins for content */ 139 margin: 0 calc(50% - 50vw); 140 padding: 0 calc(50vw - 50%); 141} 142 143.wt-genealogy-menu .dropdown-menu { 144 max-height: 60rem; 145} 146 147.wt-genealogy-menu .nav-link { 148 /* All menu icons are 40px x 40px */ 149 height: calc(40px + 1rem); 150 width: 40px; 151} 152 153.wt-genealogy-menu .nav-item::before { 154 /* The size of the menu icons */ 155 width: 40px; 156 height: 40px; 157} 158 159.wt-page-options-label, 160.wt-facts-table th, .wt-facts-table .dropdown-toggle, 161.descriptionbox, .descriptionbox a, 162.topbottombar, .topbottombar a, 163.list_label, .list_label a { 164 background-color: var(--color-3); 165 color: var(--color-6); 166} 167 168.wt-page-options-value, 169.wt-block-content, 170.wt-facts-table td, 171.ui-widget-header, 172.optionbox, .ui-state-active a:link, 173.list_value, .list_value_wrap, .list_value_wrap a { 174 background: var(--color-4); 175} 176 177 178.menu-tree .nav-link::before { 179 content: url(colors/menu/tree.png); 180} 181 182.menu-tree .dropdown-item:not(:first-child)::before { 183 content: url(colors/menu/tree-tree.png); 184} 185 186.menu-chart .nav-link::before { 187 content: url(colors/menu/chart.png); 188} 189 190.menu-chart-ancestry::before { 191 content: url(colors/menu/chart-ancestors.png); 192} 193 194.menu-chart-compact::before { 195 content: url(colors/menu/chart-compact.png); 196} 197 198.menu-chart-descendants::before { 199 content: url(colors/menu/chart-descendants.png); 200} 201 202.menu-chart-familybook::before { 203 content: url(colors/menu/chart-family-book.png); 204} 205 206.menu-chart-fanchart::before { 207 content: url(colors/menu/chart-fanchart.png); 208} 209 210.menu-chart-hourglass::before { 211 content: url(colors/menu/chart-hourglass.png); 212} 213 214.menu-chart-lifespan::before { 215 content: url(colors/menu/chart-lifespan.png); 216} 217 218.menu-chart-pedigree::before { 219 content: url(colors/menu/chart-pedigree.png); 220} 221 222.menu-chart-pedigreemap::before { 223 content: url(colors/menu/chart-pedigree-map.png); 224} 225 226.menu-chart-relationship::before { 227 content: url(colors/menu/chart-relationship.png); 228} 229 230.menu-chart-statistics::before { 231 content: url(colors/menu/chart-statistics.png); 232} 233 234.menu-chart-timeline::before { 235 content: url(colors/menu/chart-timeline.png); 236} 237 238.menu-chart-tree::before { 239 content: url(colors/menu/chart-tree.png); 240} 241 242.menu-list .nav-link::before { 243 content: url(colors/menu/list.png); 244} 245 246.menu-branches::before { 247 content: url(colors/menu/branches.png); 248} 249 250.menu-list-fam::before { 251 content: url(colors/menu/list-fam.png); 252} 253 254.menu-list-indi::before { 255 content: url(colors/menu/list-indi.png); 256} 257 258.menu-list-loc::before { 259 content: url(colors/menu/list-plac.png); 260} 261 262.menu-list-note::before { 263 content: url(colors/menu/list-note.png); 264} 265 266.menu-list-obje::before { 267 content: url(colors/menu/list-obje.png); 268} 269 270.menu-list-plac::before { 271 content: url(colors/menu/list-plac.png); 272} 273 274.menu-list-repo::before { 275 content: url(colors/menu/list-repo.png); 276} 277 278.menu-list-sour::before { 279 content: url(colors/menu/list-sour.png); 280} 281 282.menu-list-subm::before { 283 content: url(colors/menu/list-indi.png); 284} 285 286.menu-calendar .nav-link::before { 287 content: url(colors/menu/calendar.png); 288} 289 290.menu-calendar-day::before { 291 content: url(colors/menu/calendar-calendar.png); 292} 293 294.menu-calendar-month::before { 295 content: url(colors/menu/calendar-calendar.png); 296} 297 298.menu-calendar-year::before { 299 content: url(colors/menu/calendar-calendar.png); 300} 301 302.menu-report .nav-link::before { 303 content: url(colors/menu/report.png); 304} 305 306.menu-report .dropdown-item:not(:first-child)::before { 307 content: url(colors/menu/report-report.png); 308} 309 310.menu-search .nav-link::before { 311 content: url(colors/menu/search.png); 312} 313 314.menu-search .dropdown-item:not(:first-child)::before { 315 content: url(colors/menu/search-search.png); 316} 317 318.menu-faq .nav-link::before { 319 content: url(colors/menu/faq.png); 320} 321 322.menu-clippings .nav-link::before { 323 content: url(colors/menu/clippings.png); 324} 325 326.menu-clippings-download::before { 327 content: url(colors/menu/edit-gedcom.png); 328} 329 330.menu-clippings-empty::before { 331 content: url(colors/menu/edit-delete.png); 332} 333 334.menu-story .nav-link::before { 335 content: url(colors/menu/story.png); 336} 337 338.wt-page-options-value { 339 color: #333; 340} 341 342.wt-footer-cookies { 343 background: #aaa; 344} 345 346.wt-footer-powered-by-webtrees { 347 content: url(colors/images/powered-by-webtrees.png); 348} 349 350/* 351 * The tree/user home pages 352 * 353 * wt-home-page / wt-user-page 354 * +---wt-main-blocks 355 * | +---wt-block, wt-block-AAA 356 * | +---wt-block, wt-block-BBB 357 * | +---wt-block, wt-block-CCC 358 * +---wt-side-blocks 359 * +---wt-block, wt-block-XXX 360 * +---wt-block, wt-block-YYY 361 * +---wt-block, wt-block-ZZZ 362 * 363 * Each block as the structure 364 * wt-block, wt-block-XXX 365 * +---wt-block-header, wt-block-header-XXX 366 * +---wt-block-content, wt-block-content-XXX 367 */ 368 369.wt-block-header::before { 370 content: url(colors/images/block-header-disk.png); 371} 372 373/* 374 * The individual page. 375 * 376 * wt-route-individual 377 * +---wt-header-wrapper 378 */ 379 380/* 381 * Chart-boxes are used to build the various charts. 382 * Each type of chart will set its own size and hide/show content. 383 * 384 * wt-chart-box 385 * +--- wt-chart-box-thumbnail 386 * +--- wt-chart-box-extra 387 * +--- wt-chart-box-zoom 388 * +--- wt-chart-box-icon 389 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 390 * +--- wt-chart-box-links 391 * +--- wt-chart-box-icon 392 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 393 * +--- wt-chart-box-name 394 * +--- wt-chart-box-lifespan 395 * +--- wt-chart-box-facts 396 * +--- wt-chart-box-fact 397 */ 398 399.wt-chart-box-name { 400 color: #555555; 401} 402 403.btn-primary.focus, .btn-primary:focus { 404 box-shadow:none; 405 border: 0; 406} 407 408table.center { 409 margin-left: auto; 410 margin-right: auto; 411} 412 413.list_label, 414.list_label_wrap { 415 background-color: #81a9cb; 416 border: 1px solid #ddd; 417} 418 419.list_value, 420.list_value_wrap { 421 border: solid #ddd 1px; 422 padding: 4px; 423} 424 425/* Table of genealogical facts */ 426 427.wt-facts-table th { 428 border: 1px solid #ccc; 429} 430 431.date { 432 color: #333; 433} 434 435.rtl_cal_day { 436 color: #00f; 437 font-weight: bold; 438} 439 440.descriptionbox { 441 font-size: 1rem; 442 color: #333; 443 border: 1px solid #999; 444} 445 446.optionbox { 447 color: #333; 448 border: 1px solid #999; 449} 450 451.optionbox .list_value { 452 background-color: #fff; 453 border: 1px solid #999; 454 border-radius: 3px; 455} 456 457/* ---Pending edits--- */ 458 459/* ==== FAQ table styles ===== */ 460table.faq { 461 background-color: #e0e0e0; 462} 463 464table.faq tr:nth-child(odd) td { 465 background-color: #e7eef3; 466} 467 468div.faq_title { 469 background-color: #e0e0e0; 470} 471 472/* Sidebar - Descendants */ 473#sb_content_descendancy { 474 margin-top: 2px; 475} 476 477/* Individuals and Families */ 478#sidebar-content-individuals, 479#sidebar-content-families { 480 margin-top: 2px; 481} 482 483/*-- Fan chart ---- */ 484 485.icon-cfamily { 486 content: url(colors/images/cfamily.png); 487} 488 489.icon-edit_indi { 490 content: url(colors/images/edit_indi.png); 491} 492 493.icon-fam-list { 494 content: url(colors/images/sfamily.png); 495} 496 497.icon-indi-list { 498 content: url(colors/images/indis.png); 499} 500 501.icon-mypage { 502 content: url(colors/images/mypage.png); 503} 504 505.icon-selected { 506 content: url(colors/images/selected.png); 507} 508 509/* Silhouettes on charts */ 510.icon-silhouette-f { 511 content: url(colors/images/silhouette_female_small.png); 512} 513 514.icon-silhouette-m { 515 content: url(colors/images/silhouette_male_small.png); 516} 517 518.icon-silhouette-u, 519.icon-silhouette-x { 520 content: url(colors/images/silhouette_unknown_small.png); 521} 522 523/* 524 * Default icons are provided by FontAwesome. 525 */ 526 527.wt-icon-arrow-down { 528 content: url(colors/icons/arrow-down.png); 529} 530 531a > .wt-icon-arrow-down:hover { 532 content: url(colors/icons/arrow-down-hover.png); 533} 534 535.wt-icon-arrow-left { 536 content: url(colors/icons/arrow-left.png); 537} 538 539a > .wt-icon-arrow-left:hover { 540 content: url(colors/icons/arrow-left-hover.png); 541} 542 543.wt-icon-arrow-right { 544 content: url(colors/icons/arrow-right.png); 545} 546 547a > .wt-icon-arrow-right:hover { 548 content: url(colors/icons/arrow-right-hover.png); 549} 550 551.wt-icon-arrow-up { 552 content: url(colors/icons/arrow-up.png); 553} 554 555a > .wt-icon-arrow-up:hover { 556 content: url(colors/icons/arrow-up-hover.png); 557} 558 559.wt-icon-help { 560 content: url(colors/icons/help.png); 561} 562 563.wt-icon-zoom-in { 564 content: url(colors/icons/zoom-in.png); 565} 566 567.wt-icon-zoom-out { 568 content: url(colors/icons/zoom-out.png); 569} 570 571/* Miscellaneous images */ 572.icon-indis { 573 content: url(colors/images/mypage.png); 574} 575 576.icon-patriarch { 577 content: url(colors/images/patriarch.png); 578} 579 580.icon-pedigree { 581 content: url(colors/images/pedigree.png); 582} 583 584.icon-sfamily { 585 content: url(colors/images/sfamily.png); 586} 587 588.icon-user_add { 589 content: url(colors/images/user_add.png); 590} 591
