xref: /webtrees/resources/css/colors.css (revision 3d9e70a53ebdea3db408ada1769711840cc7d14c) 
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/* Override Bootstrap formatting */
20
21.select2-container--default .select2-results__option--highlighted[aria-selected] {
22    background-color: #eee;
23    color: #000;
24}
25
26a, .btn-link, .nav-link {
27    color: #333;
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