xref: /webtrees/resources/css/minimal.css (revision 43f2f523bcb6d4090564d23802872c0679ede6bc)
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 <https://www.gnu.org/licenses/>.
14 */
15
16/* The minimal theme */
17@import "_base.css";
18
19:root {
20    --chart-line-radius: 1rem;
21    --chart-line: solid gray thin;
22    --link-color-hover: #0a58ca;
23    --link-color: #0d6efd;
24    --link-decoration-hover: underline;
25    --link-decoration: underline;
26    --sex-f-bg: #ffffff;
27    --sex-f-fg: #888888;
28    --sex-m-bg: #ffffff;
29    --sex-m-fg: #888888;
30    --sex-u-bg: #ffffff;
31    --sex-u-fg: #888888;
32}
33
34/* Override Bootstrap formatting */
35.btn-link {
36    padding-left: 0.25rem;
37    padding-right: 0.25rem;
38}
39
40.table-given-name {
41    overflow-x: hidden;
42}
43
44.container-fluid {
45    padding-left: 5px;
46    padding-right: 5px;
47}
48
49table {
50    border-collapse: separate;
51}
52
53/*
54 * Pages have the following high-level structure:
55 *
56 * wt-global wt-theme-<THEME> wt-route-<ROUTE>
57 * +---wt-header-wrapper
58 * |   +---wt-header-container
59 * |       +---wt-header-content
60 * |           +---wt-accessibility-links
61 * |           +---wt-site-logo
62 * |           +---wt-site-title
63 * |           +---wt-header-search
64 * |           |   +---wt-header-search-form
65 * |           |       +---wt-header-search-field
66 * |           |       +---wt-header-search-button
67 * |           +---wt-secondary-navigation
68 * |           |   +---wt-user-menu
69 * |           +---wt-primary-navigation
70 * |               +---wt-genealogy-menu
71 * +---wt-main-wrapper
72 * |   +---wt-main-container
73 * |       +---wt-main-content
74 * |           +---wt-messages
75 * |           +---wt-page-title
76 * |           +---wt-page-options wt-page-options-xxxxx
77 * |           +---wt-page-content
78 * +---wt-footers
79 *     +---wt-footer wt-footer-xxxxx
80 */
81
82.wt-global {
83    /* Avoid extremes of black and white.  It is better for users with dyslexia. */
84    color: #0a0a0a;
85    background-color: #f9f9f9;
86}
87
88.wt-header-wrapper {
89}
90
91.wt-header-container {
92    margin-top: 1rem;
93}
94
95.wt-header-content {
96}
97
98.wt-accessibility-links {
99}
100
101.wt-site-logo {
102    display: none;
103}
104
105.wt-site-title {
106    order: 1;
107    flex: 1 1 auto;
108    width: auto;
109    font-size: 1.75rem;
110}
111
112.wt-header-search {
113    order: 3;
114    flex: 0 0 15rem;
115}
116
117.wt-header-search-form {
118}
119
120.wt-header-search-field {
121}
122
123.wt-header-search-button {
124}
125
126.wt-secondary-navigation {
127    order: 2;
128    flex: 0 0 auto;
129    width: auto;
130    white-space: nowrap;
131}
132
133.wt-user-menu {
134    flex-wrap: nowrap;
135}
136
137.wt-user-menu .nav-link {
138    padding: 0.5rem;
139}
140
141.wt-primary-navigation {
142    order: 4;
143    /* Extend to full page width */
144    flex: 0 1 100vw;
145    max-width: 100vw;
146    /* Recalculate margins for content */
147    margin: 0 calc(50% - 50vw);
148    padding: 0 calc(50vw - 50%);
149    border-bottom: 2px solid #aaa;
150}
151
152.wt-genealogy-menu {
153    justify-content: center;
154}
155
156.wt-genealogy-menu .nav-link {
157    padding: 0.5rem;
158}
159
160.wt-main-container {
161    /* Space between the header/footer and the main content. */
162    padding-top: 1rem;
163    padding-bottom: 1rem;
164}
165
166.wt-main {
167}
168
169.wt-messages {
170}
171
172.wt-page-title {
173    text-align: center;
174}
175
176.wt-page-content {
177    margin-top: 1rem;
178}
179
180.wt-footers {
181}
182
183.wt-footer {
184}
185
186.wt-footer-contact {
187}
188
189.wt-footer-cookies {
190    background: #aaa;
191    color: #fff;
192    transition: height 0.5s;
193}
194
195.wt-footer-page-views {
196}
197
198.wt-footer-powered-by {
199}
200
201.wt-footer-powered-by-webtrees {
202}
203
204/*
205 * The tree/user home pages
206 *
207 * wt-home-page / wt-user-page
208 * +---wt-main-blocks
209 * |   +---wt-block, wt-block-AAA
210 * |   +---wt-block, wt-block-BBB
211 * |   +---wt-block, wt-block-CCC
212 * +---wt-side-blocks
213 *     +---wt-block, wt-block-XXX
214 *     +---wt-block, wt-block-YYY
215 *     +---wt-block, wt-block-ZZZ
216 *
217 * Each block as the structure
218 * wt-block, wt-block-XXX
219 * +---wt-block-header, wt-block-header-XXX
220 * +---wt-block-content, wt-block-content-XXX
221 */
222
223.wt-block {
224    border: solid #000 1px;
225}
226
227.wt-block-header {
228    background-color: #fff;
229}
230
231.wt-block-content {
232}
233
234.wt-block-content .list_table {
235    border-spacing: 1px;
236    border: solid #000 1px;
237    border-right: 0;
238}
239
240.wt-block-content .list_value,
241.wt-block-content .list_value_wrap {
242    border: 0;
243    border-top: solid #000 1px;
244    border-right: solid #000 1px;
245}
246
247/*
248 * The individual page.
249 *
250 * wt-route-individual
251 * +---wt-header-wrapper
252 */
253
254.wt-individual-silhouette {
255    content: url(images/individual-silhouette-unknown.png);
256}
257
258.wt-individual-silhouette-f {
259    content: url(images/individual-silhouette-female.png);
260}
261
262.wt-individual-silhouette-m {
263    content: url(images/individual-silhouette-male.png);
264}
265
266/*
267 * Chart-boxes are used to build the various charts.
268 * Each type of chart will set its own size and hide/show content.
269 *
270 * wt-chart-box
271 * +--- wt-chart-box-thumbnail
272 * +--- wt-chart-box-extra
273 *      +--- wt-chart-box-zoom
274 *           +--- wt-chart-box-icon
275 *           +--- wt-chart-box-dropdown wt-chart-box-zoom-dropdown
276 *      +--- wt-chart-box-links
277 *           +--- wt-chart-box-icon
278 *           +--- wt-chart-box-dropdown wt-chart-box-links-dropdown
279 * +--- wt-chart-box-name
280 * +--- wt-chart-box-lifespan
281 * +--- wt-chart-box-facts
282 *     +--- wt-chart-box-fact
283 */
284.wt-chart-box,
285.wt-chart-box-menu {
286    background: var(--sex-u-bg);
287    border: dashed var(--sex-u-fg) thin;
288}
289
290.wt-chart-box {
291    height: 5rem;
292    padding: 2px;
293    line-height: 1.1;
294}
295
296.wt-chart-box-f,
297.wt-chart-box-f .wt-chart-box-dropdown {
298    background: var(--sex-f-bg);
299    border: solid var(--sex-f-fg) thin;
300}
301
302.wt-chart-box-m,
303.wt-chart-box-m .wt-chart-box-dropdown {
304    background: var(--sex-m-bg);
305    border: solid var(--sex-m-fg) thin;
306}
307
308/* ---Pending edits--- */
309.wt-new {
310    outline: solid thin blue;
311}
312
313.wt-old {
314    outline: solid thin red;
315}
316
317.list_value,
318.list_value_wrap {
319    border: solid #000 1px;
320    vertical-align: top;
321    padding: 4px;
322}
323
324.list_table {
325    margin: 0 auto;
326}
327
328.filtersH,
329.filtersF {
330    margin: 4px;
331}
332
333.filtersH img {
334    margin-bottom: 2px;
335}
336
337.list-charts {
338    text-align: center;
339}
340
341#place-hierarchy h2,
342#place-hierarchy h4 {
343    text-align: center;
344}
345
346/* ======== Block styles ===== */
347.block {
348    background-color: #fff;
349    color: #555;
350    border: solid #ccc 1px;
351    padding: 3px;
352    vertical-align: top;
353}
354
355.blockcontent {
356    margin: 5px;
357    overflow: auto;
358}
359
360.blockcontent .list_table {
361    border-spacing: 0;
362    border: solid #555 1px;
363    border-right: 0;
364}
365
366.blockcontent .list_value,
367.blockcontent .list_value_wrap {
368    border: 0;
369    border-top: solid #555 1px;
370    border-right: solid #555 1px;
371}
372
373.blockheader {
374    font-weight: bold;
375}
376
377/* end Block styles */
378
379.user_welcome_block table,
380.gedcom_block_block table {
381    margin: auto;
382}
383
384.user_welcome_block td,
385.gedcom_block_block td {
386    width: 33%;
387    text-align: center;
388    vertical-align: top;
389}
390
391.user_welcome_block i,
392.gedcom_block_block i {
393    background-image: none;
394    height: 0;
395    width: 0;
396}
397
398/* Table of genealogical facts */
399.wt-facts-table caption {
400    caption-side: top;
401}
402
403.wt-facts-table th {
404    border: 1px solid #000;
405    font-weight: normal;
406    min-width: 20%;
407}
408
409.wt-facts-table td {
410    border: solid #000 1px;
411}
412
413.parentdeath {
414    padding: 1px;
415}
416
417/* ==== FAQ table styles ===== */
418table.faq {
419    background-color: #ddd;
420    margin: 5px 0 50px 5px;
421    width: 98%;
422}
423
424table.faq tr:nth-child(odd) td {
425    background-color: #fff;
426}
427
428div.faq_title {
429    background-color: #ddd;
430    margin: 1em 0;
431    padding: .25em;
432    font-weight: bold;
433    width: 98%;
434}
435
436div.faq_body {
437    clear: both;
438    padding: 0 1em;
439}
440
441.faq_top {
442    float: right;
443}
444
445/* === Positioning edit, copy, delete links === */
446/* General use */
447.editfacts {
448    clear: left;
449    padding-top: 15px;
450}
451
452#indi_note {
453    margin: 0 0 5px;
454}
455
456.indi_table {
457    clear: left;
458}
459
460.label {
461    font-weight: bold;
462}
463
464#indi_note .fact_NOTE {
465    float: left;
466    margin: 0 5px 0 0;
467}
468
469#indi_note .fact_SOUR {
470    margin: 3px 0;
471}
472
473#indi_note .fact_SOUR a {
474    font-size: 100%;
475}
476
477#indi_note .fact_NOTE,
478#indi_note .fact_SOUR {
479    clear: both;
480}
481
482.odometer {
483    font-family: courier, monospace;
484    font-weight: bold;
485    background: #000;
486    color: #fff;
487}
488
489.upcoming_events_block button,
490.todays_events_block button {
491    margin: 0 20px;
492}
493
494/* Sidebar - Family navigator */
495
496/* Sidebar - Descendants */
497#sb_content_descendancy {
498    margin-top: 5px;
499}
500
501#sb_desc_content {
502    margin-left: 3px;
503    font-size: 0.8em;
504}
505
506#sb_desc_content ul {
507    padding: 0;
508    margin: 0;
509}
510
511.sb_desc_indi_li {
512    list-style-type: none;
513}
514
515/* Individuals and Families */
516#sidebar-content-individuals,
517#sidebar-content-families {
518    margin-top: 5px;
519}
520
521.sb_indi_surname_li,
522.sb_fam_surname_li {
523    list-style-image: url(icons/plus.png);
524}
525
526.name_tree_div ul {
527    padding: 0;
528    margin: 0;
529}
530
531.name_tree_div li {
532    list-style: none;
533    margin: 0;
534    padding: 0;
535}
536
537/* Clippings */
538#sb_clippings_content ul {
539    padding: 0;
540    margin: 0;
541}
542
543#sb_clippings_content li {
544    list-style: none;
545    margin: 0;
546    padding: 0;
547    white-space: nowrap;
548}
549
550/* Stories module */
551.story_title {
552    padding-top: 12px;
553    font-size: 13px;
554    height: 32px;
555    font-weight: bold;
556}
557
558.story_body {
559    padding: 20px;
560    white-space: normal;
561}
562
563.story_edit {
564    padding: 12px;
565}
566
567/* Stories module */
568.story_title {
569    padding-top: 12px;
570    font-size: 13px;
571    height: 32px;
572    font-weight: bold;
573}
574
575.story_body {
576    padding: 20px;
577    white-space: normal;
578}
579
580.story_edit {
581    padding: 12px;
582}
583
584/* ====== Charts Styles ======== */
585
586#people label {
587    display: block;
588}
589
590/*-- Fan chart ---- */
591.fan_chart_menu {
592    background: #fff;
593    position: absolute;
594    display: none;
595    z-index: 100;
596}
597
598#fan_chart ul {
599    list-style-type: none;
600    margin: 0;
601}
602
603/* Lifespans chart */
604.wt-lifespans-subtitle {
605    text-align: center;
606}
607
608.wt-lifespans-scale {
609    white-space: nowrap;
610}
611
612.wt-lifespans-decade {
613    width: 70px;
614    height: 60px;
615    display: inline-block;
616    background-image: url(images/lifespan-decade.png);
617    background-position-y: bottom;
618    background-repeat: no-repeat;
619    background-size: 70px 37px;
620}
621
622.wt-lifespans-individuals {
623    background: #fafafa;
624}
625
626.wt-lifespans-individual {
627
628}
629
630.wt-lifespans-summary {
631    background: #ffffff;
632    border: thin solid #000;
633    z-index: 1;
634}
635
636.wt-lifespans-summary-link {
637    font-weight: bold;
638}
639
640/*-- Pedigree ---- */
641.tvertline {
642    vertical-align: bottom;
643}
644
645.optionbox, .descriptionbox {
646    border: solid #000 1px;
647    vertical-align: top;
648    padding: 3px;
649}
650
651#childbox {
652    padding: 5px;
653    position: absolute;
654    display: none;
655    text-align: start;
656    white-space: nowrap;
657    top: 20px;
658    left: 0;
659}
660
661.layout3 #childbox {
662    top: auto;
663    bottom: 20px;
664}
665
666.person0, .person1, .person2, .person3, .person4, .person5 {
667    border:outset #555 1px;
668    vertical-align:top;
669}
670.person0{
671    background-color:#eee;
672}
673
674.person1{
675    background-color:#bfbfbf;
676}
677
678.person2{
679    background-color:#999;
680}
681
682.person3{
683    background-color:#dfdfdf;
684}
685
686.person4{
687    background-color:#eee;
688}
689
690.person5{
691    background-color:#fefefe;
692}
693
694/*-- timeline  --*/
695#timeline_chart {
696    position: relative;
697    top: 0;
698    left: 0;
699}
700
701/*
702 * Any element that is loaded dynamically has the class wt-ajax-load.
703 * We can provide a "loading" placeholder for empty elements with this class.
704 */
705.wt-ajax-load:empty {
706    height: 32px;
707    background: url(images/loading-32x32.gif) no-repeat 50% 50%;
708}
709
710/*
711 * Default icons are provided by FontAwesome.
712 */
713.wt-icon-anniversary {
714}
715
716.wt-icon-arrow-down {
717}
718
719a > .wt-icon-arrow-down:hover {
720}
721
722.wt-icon-arrow-left {
723}
724
725a > .wt-icon-arrow-left:hover {
726}
727
728.wt-icon-arrow-right {
729}
730
731a > .wt-icon-arrow-right:hover {
732}
733
734.wt-icon-arrow-up {
735}
736
737a > .wt-icon-arrow-up:hover {
738}
739
740.wt-icon-bing-maps {
741}
742
743.wt-icon-calendar {
744}
745
746.wt-icon-collapse {
747}
748
749.wt-icon-coordinates {
750}
751
752.wt-icon-copy {
753}
754
755.wt-icon-delete {
756}
757
758.wt-icon-edit {
759}
760
761.wt-icon-expand {
762}
763
764.wt-icon-family {
765}
766
767.wt-icon-google-maps {
768}
769
770.wt-icon-help {
771}
772
773.wt-icon-individual {
774}
775
776.wt-icon-keyboard {
777}
778
779.wt-icon-media {
780}
781
782.wt-icon-note {
783}
784
785.wt-icon-openstreetmap {
786}
787
788.wt-icon-preferences {
789}
790
791.wt-icon-reorder {
792}
793
794.wt-icon-repository {
795}
796
797.wt-icon-sex-f {
798    color: var(--sex-m-fg);
799}
800
801.wt-icon-sex-m {
802    color: var(--sex-m-fg);
803}
804
805.wt-icon-sex-u {
806    color: var(--sex-u-fg);
807}
808
809.wt-icon-sex-x {
810    color: var(--sex-u-fg);
811}
812
813.wt-icon-source {
814}
815
816.wt-icon-submitter {
817}
818
819.wt-icon-warning {
820}
821
822.wt-icon-zoom-in {
823}
824
825.wt-icon-zoom-out {
826}
827
828/* Miscellaneous images */
829.icon-cfamily {
830}
831
832.icon-childless {
833    content: url(images/childless.png);
834}
835
836.icon-children {
837    content: url(images/children.png);
838}
839
840.icon-edit_indi {
841    content: url(minimal/images/edit_indi.png);
842}
843
844.icon-fam-list {
845    content: url(minimal/images/sfamily.png);
846}
847
848.icon-indi-list {
849    content: url(minimal/images/indis.png);
850}
851
852.icon-loading-small {
853    content: url(images/indicator.gif);
854}
855
856.icon-loading-large {
857    content: url(images/loading-32x32.gif);
858}
859
860.icon-minus {
861    content: url(icons/minus.png);
862}
863
864.icon-mypage {
865    content: url(minimal/images/mypage.png);
866}
867
868.icon-plus {
869    content: url(icons/plus.png);
870}
871
872.icon-resn-confidential {
873    content: none;
874}
875
876.icon-resn-locked {
877    content: none;
878}
879
880.icon-resn-none {
881    content: none;
882}
883
884.icon-resn-privacy {
885    content: none;
886}
887
888.icon-rings {
889    content: url(images/rings.png);
890}
891
892.icon-selected {
893    content: url(minimal/images/selected.png);
894}
895
896.icon-sfamily {
897    content: url(minimal/images/sfamily.png);
898}
899
900/* Silhouettes on charts */
901.icon-silhouette-F {
902    content: url(minimal/images/silhouette_female_small.png);
903}
904
905.icon-silhouette-M {
906    content: url(minimal/images/silhouette_male_small.png);
907}
908
909.icon-silhouette-U {
910    content: url(minimal/images/silhouette_unknown_small.png);
911}
912
913.icon-indis {
914    content: url(minimal/images/indis.png);
915}
916
917.icon-pedigree {
918    content: url(minimal/images/pedigree.png);
919}
920
921/* Census assistant */
922.wt-census-assistant-form-control:focus {
923    min-width: 12rem;
924}
925
926/* Some blocks show a reduced version on the right-hand side. */
927.wt-side-blocks .wt-side-block-optional {
928    display: none !important;
929}
930
931/* my page chart enhancements */
932.wt-block-content-charts {
933    overflow: auto;
934}
935
936/* Some charts are wider than the page. */
937.wt-chart {
938    overflow-x: auto;
939    overflow-y: hidden;
940}
941
942/* Fit thumbnail into parent on charts */
943.select2-selection.select2-selection--single {
944    min-height: 36px;
945    height: auto;
946    padding: 2px 0;
947}
948
949.select2-container .select2-selection--single .select2-selection__rendered {
950    padding-left: 2px;
951}
952
953.select2-selection--single .NAME {
954    padding-left: 4px;
955}
956
957/*
958 *  These selectors control how the short horizontal lines are positioned in the Charts
959 *  Optimized for Win10 and FF, Chrome and Edge browsers
960 *  	Ancestors
961 *  	Descendants
962 *  	amily book
963 *
964 */
965
966/* Ascentors */
967.wt-chart-ancestors .linea1 {
968    margin-bottom: 4px;
969}
970
971.wt-chart-ancestors .linea2 {
972    margin-bottom: 7px;
973}
974
975.wt-chart-ancestors .linea3 {
976    margin-bottom: 4px;
977}
978
979.wt-chart-ancestors .linea4 {
980    margin-bottom: 7px;
981}
982
983.wt-chart-ancestors .linea5 {
984    vertical-align: top;
985}
986
987/* Descendants */
988.wt-chart-descendants .lined1 {
989    margin-bottom: 4px;
990}
991
992.wt-chart-descendants .lined2 {
993    margin-bottom: 7px;
994}
995
996.wt-chart-descendants .lined3 {
997    margin-bottom: 4px;
998}
999
1000.wt-chart-descendants .lined4 {
1001    margin-bottom: 7px;
1002}
1003
1004.wt-chart-descendants .linea5 {
1005    vertical-align: top;
1006}
1007
1008.wt-calendar-month {
1009    border-collapse: collapse;
1010}
1011
1012.wt-calendar-month .wt-page-options-label,
1013.wt-calendar-month .wt-page-options-value {
1014    border: solid grey thin;
1015    padding: 0.2rem;
1016}
1017
1018/* Some menus (e.g. languages) can be longer than a page */
1019.dropdown-menu {
1020    max-height: 30rem;
1021    overflow-x: hidden;
1022}
1023
1024/* Forms */
1025.col-form-label {
1026    font-weight: bold;
1027}
1028
1029/* Accordions */
1030.accordion .wt-icon-expand,
1031.accordion .wt-icon-collapse {
1032    display: none;
1033}
1034
1035.accordion-button:after {
1036    display: block;
1037}
1038