1/** 2 * webtrees: online genealogy 3 * Copyright (C) 2021 webtrees development team 4 * This program is free software: you can redistribute it and/or modify 5 * it under the terms of the GNU General Public License as published by 6 * the Free Software Foundation, either version 3 of the License, or 7 * (at your option) any later version. 8 * This program is distributed in the hope that it will be useful, 9 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 * GNU General Public License for more details. 12 * You should have received a copy of the GNU General Public License 13 * along with this program. If not, see <http://www.gnu.org/licenses/>. 14 */ 15 16/* The 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.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#login-form, #new_passwd_form, #register-form { 175 background: var(--color-4); 176} 177 178 179.menu-tree .nav-link::before { 180 content: url(colors/menu/tree.png); 181} 182 183.menu-tree .dropdown-item:not(:first-child)::before { 184 content: url(colors/menu/tree-tree.png); 185} 186 187.menu-chart .nav-link::before { 188 content: url(colors/menu/chart.png); 189} 190 191.menu-chart-ancestry::before { 192 content: url(colors/menu/chart-ancestors.png); 193} 194 195.menu-chart-compact::before { 196 content: url(colors/menu/chart-compact.png); 197} 198 199.menu-chart-descendants::before { 200 content: url(colors/menu/chart-descendants.png); 201} 202 203.menu-chart-familybook::before { 204 content: url(colors/menu/chart-family-book.png); 205} 206 207.menu-chart-fanchart::before { 208 content: url(colors/menu/chart-fanchart.png); 209} 210 211.menu-chart-hourglass::before { 212 content: url(colors/menu/chart-hourglass.png); 213} 214 215.menu-chart-lifespan::before { 216 content: url(colors/menu/chart-lifespan.png); 217} 218 219.menu-chart-pedigree::before { 220 content: url(colors/menu/chart-pedigree.png); 221} 222 223.menu-chart-pedigreemap::before { 224 content: url(colors/menu/chart-pedigree-map.png); 225} 226 227.menu-chart-relationship::before { 228 content: url(colors/menu/chart-relationship.png); 229} 230 231.menu-chart-statistics::before { 232 content: url(colors/menu/chart-statistics.png); 233} 234 235.menu-chart-timeline::before { 236 content: url(colors/menu/chart-timeline.png); 237} 238 239.menu-chart-tree::before { 240 content: url(colors/menu/chart-tree.png); 241} 242 243.menu-list .nav-link::before { 244 content: url(colors/menu/list.png); 245} 246 247.menu-branches::before { 248 content: url(colors/menu/branches.png); 249} 250 251.menu-list-fam::before { 252 content: url(colors/menu/list-fam.png); 253} 254 255.menu-list-indi::before { 256 content: url(colors/menu/list-indi.png); 257} 258 259.menu-list-loc::before { 260 content: url(colors/menu/list-plac.png); 261} 262 263.menu-list-note::before { 264 content: url(colors/menu/list-note.png); 265} 266 267.menu-list-obje::before { 268 content: url(colors/menu/list-obje.png); 269} 270 271.menu-list-plac::before { 272 content: url(colors/menu/list-plac.png); 273} 274 275.menu-list-repo::before { 276 content: url(colors/menu/list-repo.png); 277} 278 279.menu-list-sour::before { 280 content: url(colors/menu/list-sour.png); 281} 282 283.menu-list-subm::before { 284 content: url(colors/menu/list-indi.png); 285} 286 287.menu-calendar .nav-link::before { 288 content: url(colors/menu/calendar.png); 289} 290 291.menu-calendar-day::before { 292 content: url(colors/menu/calendar-calendar.png); 293} 294 295.menu-calendar-month::before { 296 content: url(colors/menu/calendar-calendar.png); 297} 298 299.menu-calendar-year::before { 300 content: url(colors/menu/calendar-calendar.png); 301} 302 303.menu-report .nav-link::before { 304 content: url(colors/menu/report.png); 305} 306 307.menu-report .dropdown-item:not(:first-child)::before { 308 content: url(colors/menu/report-report.png); 309} 310 311.menu-search .nav-link::before { 312 content: url(colors/menu/search.png); 313} 314 315.menu-search .dropdown-item:not(:first-child)::before { 316 content: url(colors/menu/search-search.png); 317} 318 319.menu-faq .nav-link::before { 320 content: url(colors/menu/faq.png); 321} 322 323.menu-clippings .nav-link::before { 324 content: url(colors/menu/clippings.png); 325} 326 327.menu-clippings-download::before { 328 content: url(colors/menu/edit-gedcom.png); 329} 330 331.menu-clippings-empty::before { 332 content: url(colors/menu/edit-delete.png); 333} 334 335.menu-story .nav-link::before { 336 content: url(colors/menu/story.png); 337} 338 339.wt-page-options-value { 340 color: #333; 341} 342 343.wt-footer-cookies { 344 background: #aaa; 345} 346 347.wt-footer-powered-by-webtrees { 348 content: url(colors/images/powered-by-webtrees.png); 349} 350 351/* 352 * The tree/user home pages 353 * 354 * wt-home-page / wt-user-page 355 * +---wt-main-blocks 356 * | +---wt-block, wt-block-AAA 357 * | +---wt-block, wt-block-BBB 358 * | +---wt-block, wt-block-CCC 359 * +---wt-side-blocks 360 * +---wt-block, wt-block-XXX 361 * +---wt-block, wt-block-YYY 362 * +---wt-block, wt-block-ZZZ 363 * 364 * Each block as the structure 365 * wt-block, wt-block-XXX 366 * +---wt-block-header, wt-block-header-XXX 367 * +---wt-block-content, wt-block-content-XXX 368 */ 369 370.wt-block-header::before { 371 content: url(colors/images/block-header-disk.png); 372} 373 374/* 375 * The individual page. 376 * 377 * wt-route-individual 378 * +---wt-header-wrapper 379 */ 380 381/* 382 * Chart-boxes are used to build the various charts. 383 * Each type of chart will set its own size and hide/show content. 384 * 385 * wt-chart-box 386 * +--- wt-chart-box-thumbnail 387 * +--- wt-chart-box-extra 388 * +--- wt-chart-box-zoom 389 * +--- wt-chart-box-icon 390 * +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown 391 * +--- wt-chart-box-links 392 * +--- wt-chart-box-icon 393 * +--- wt-chart-box-dropdown wt-chart-box-links-dropdown 394 * +--- wt-chart-box-name 395 * +--- wt-chart-box-lifespan 396 * +--- wt-chart-box-facts 397 * +--- wt-chart-box-fact 398 */ 399 400.wt-chart-box-name { 401 color: #555555; 402} 403 404.btn-primary.focus, .btn-primary:focus { 405 box-shadow:none; 406 border: 0; 407} 408 409table.center { 410 margin-left: auto; 411 margin-right: auto; 412} 413 414.list_label, 415.list_label_wrap { 416 background-color: #81a9cb; 417 border: 1px solid #ddd; 418} 419 420.list_value, 421.list_value_wrap { 422 border: solid #ddd 1px; 423 padding: 4px; 424} 425 426/* Table of genealogical facts */ 427 428.wt-facts-table th { 429 border: 1px solid #ccc; 430} 431 432.date { 433 color: #333; 434} 435 436.rtl_cal_day { 437 color: #00f; 438 font-weight: bold; 439} 440 441.descriptionbox { 442 font-size: 1rem; 443 color: #333; 444 border: 1px solid #999; 445} 446 447.optionbox { 448 color: #333; 449 border: 1px solid #999; 450} 451 452.optionbox .list_value { 453 background-color: #fff; 454 border: 1px solid #999; 455 border-radius: 3px; 456} 457 458/* ---Pending edits--- */ 459 460/* ==== FAQ table styles ===== */ 461table.faq { 462 background-color: #e0e0e0; 463} 464 465table.faq tr:nth-child(odd) td { 466 background-color: #e7eef3; 467} 468 469div.faq_title { 470 background-color: #e0e0e0; 471} 472 473/* Sidebar - Descendants */ 474#sb_content_descendancy { 475 margin-top: 2px; 476} 477 478/* Individuals and Families */ 479#sidebar-content-individuals, 480#sidebar-content-families { 481 margin-top: 2px; 482} 483 484/*-- Fan chart ---- */ 485 486.icon-cfamily { 487 content: url(colors/images/cfamily.png); 488} 489 490.icon-edit_indi { 491 content: url(colors/images/edit_indi.png); 492} 493 494.icon-fam-list { 495 content: url(colors/images/sfamily.png); 496} 497 498.icon-indi-list { 499 content: url(colors/images/indis.png); 500} 501 502.icon-mypage { 503 content: url(colors/images/mypage.png); 504} 505 506.icon-selected { 507 content: url(colors/images/selected.png); 508} 509 510/* Silhouettes on charts */ 511.icon-silhouette-f { 512 content: url(colors/images/silhouette_female_small.png); 513} 514 515.icon-silhouette-m { 516 content: url(colors/images/silhouette_male_small.png); 517} 518 519.icon-silhouette-u, 520.icon-silhouette-x { 521 content: url(colors/images/silhouette_unknown_small.png); 522} 523 524/* 525 * Default icons are provided by FontAwesome. 526 */ 527 528.wt-icon-arrow-down { 529 content: url(colors/icons/arrow-down.png); 530} 531 532a > .wt-icon-arrow-down:hover { 533 content: url(colors/icons/arrow-down-hover.png); 534} 535 536.wt-icon-arrow-left { 537 content: url(colors/icons/arrow-left.png); 538} 539 540a > .wt-icon-arrow-left:hover { 541 content: url(colors/icons/arrow-left-hover.png); 542} 543 544.wt-icon-arrow-right { 545 content: url(colors/icons/arrow-right.png); 546} 547 548a > .wt-icon-arrow-right:hover { 549 content: url(colors/icons/arrow-right-hover.png); 550} 551 552.wt-icon-arrow-up { 553 content: url(colors/icons/arrow-up.png); 554} 555 556a > .wt-icon-arrow-up:hover { 557 content: url(colors/icons/arrow-up-hover.png); 558} 559 560.wt-icon-help { 561 content: url(colors/icons/help.png); 562} 563 564.wt-icon-zoom-in { 565 content: url(colors/icons/zoom-in.png); 566} 567 568.wt-icon-zoom-out { 569 content: url(colors/icons/zoom-out.png); 570} 571 572/* Miscellaneous images */ 573.icon-indis { 574 content: url(colors/images/mypage.png); 575} 576 577.icon-patriarch { 578 content: url(colors/images/patriarch.png); 579} 580 581.icon-pedigree { 582 content: url(colors/images/pedigree.png); 583} 584 585.icon-sfamily { 586 content: url(colors/images/sfamily.png); 587} 588 589.icon-user_add { 590 content: url(colors/images/user_add.png); 591} 592
