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