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