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