xref: /webtrees/resources/css/minimal.css (revision 9026ef5bd8d55330f29b7fff025dae728574371b)
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#index_main_blocks {
348    clear: none;
349    width: 60%;
350    float: left;
351}
352
353#index_small_blocks {
354    clear: none;
355    width: 40%;
356    float: right;
357}
358
359#index_full_blocks {
360    clear: none;
361    width: 100%;
362}
363
364.block {
365    background-color: #fff;
366    color: #555;
367    border: solid #ccc 1px;
368    padding: 3px;
369    vertical-align: top;
370}
371
372.blockcontent {
373    margin: 5px;
374    overflow: auto;
375}
376
377.blockcontent .list_table {
378    border-spacing: 0;
379    border: solid #555 1px;
380    border-right: 0;
381}
382
383.blockcontent .list_value,
384.blockcontent .list_value_wrap {
385    border: 0;
386    border-top: solid #555 1px;
387    border-right: solid #555 1px;
388}
389
390.blockheader {
391    font-weight: bold;
392}
393
394/* end Block styles */
395
396.user_welcome_block table,
397.gedcom_block_block table {
398    margin: auto;
399}
400
401.user_welcome_block td,
402.gedcom_block_block td {
403    width: 33%;
404    text-align: center;
405    vertical-align: top;
406}
407
408.user_welcome_block i,
409.gedcom_block_block i {
410    background-image: none;
411    height: 0;
412    width: 0;
413}
414
415/* Table of genealogical facts */
416.wt-facts-table caption {
417    caption-side: top;
418}
419
420.wt-facts-table th {
421    border: 1px solid #000;
422    font-weight: normal;
423    min-width: 20%;
424}
425
426.wt-facts-table td {
427    border: solid #000 1px;
428}
429
430.parentdeath {
431    padding: 1px;
432}
433
434/* ==== FAQ table styles ===== */
435table.faq {
436    background-color: #ddd;
437    margin: 5px 0 50px 5px;
438    width: 98%;
439}
440
441table.faq tr:nth-child(odd) td {
442    background-color: #fff;
443}
444
445div.faq_title {
446    background-color: #ddd;
447    margin: 1em 0;
448    padding: .25em;
449    font-weight: bold;
450    width: 98%;
451}
452
453div.faq_body {
454    clear: both;
455    padding: 0 1em;
456}
457
458.faq_top {
459    float: right;
460}
461
462/* === Positioning edit, copy, delete links === */
463/* General use */
464.editfacts {
465    clear: left;
466    padding-top: 15px;
467}
468
469#indi_note {
470    margin: 0 0 5px;
471}
472
473.indi_table {
474    clear: left;
475}
476
477.label {
478    font-weight: bold;
479}
480
481#indi_note .fact_NOTE {
482    float: left;
483    margin: 0 5px 0 0;
484}
485
486#indi_note .fact_SOUR {
487    margin: 3px 0;
488}
489
490#indi_note .fact_SOUR a {
491    font-size: 100%;
492}
493
494#indi_note .fact_NOTE,
495#indi_note .fact_SOUR {
496    clear: both;
497}
498
499.odometer {
500    font-family: courier, monospace;
501    font-weight: bold;
502    background: #000;
503    color: #fff;
504}
505
506.upcoming_events_block button,
507.todays_events_block button {
508    margin: 0 20px;
509}
510
511/* Sidebar - Family navigator */
512
513/* Sidebar - Descendants */
514#sb_content_descendancy {
515    margin-top: 5px;
516}
517
518#sb_desc_content {
519    margin-left: 3px;
520    font-size: 0.8em;
521}
522
523#sb_desc_content ul {
524    padding: 0;
525    margin: 0;
526}
527
528.sb_desc_indi_li {
529    list-style-type: none;
530}
531
532/* Individuals and Families */
533#sidebar-content-individuals,
534#sidebar-content-families {
535    margin-top: 5px;
536}
537
538.sb_indi_surname_li,
539.sb_fam_surname_li {
540    list-style-image: url(icons/plus.png);
541}
542
543.name_tree_div ul {
544    padding: 0;
545    margin: 0;
546}
547
548.name_tree_div li {
549    list-style: none;
550    margin: 0;
551    padding: 0;
552}
553
554/* Clippings */
555#sb_clippings_content ul {
556    padding: 0;
557    margin: 0;
558}
559
560#sb_clippings_content li {
561    list-style: none;
562    margin: 0;
563    padding: 0;
564    white-space: nowrap;
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/* Stories module */
585.story_title {
586    padding-top: 12px;
587    font-size: 13px;
588    height: 32px;
589    font-weight: bold;
590}
591
592.story_body {
593    padding: 20px;
594    white-space: normal;
595}
596
597.story_edit {
598    padding: 12px;
599}
600
601/* ====== Charts Styles ======== */
602
603#people label {
604    display: block;
605}
606
607/*-- Fan chart ---- */
608.fan_chart_menu {
609    background: #fff;
610    position: absolute;
611    display: none;
612    z-index: 100;
613}
614
615#fan_chart ul {
616    list-style-type: none;
617    margin: 0;
618}
619
620/* Lifespans chart */
621.wt-lifespans-subtitle {
622    text-align: center;
623}
624
625.wt-lifespans-scale {
626    white-space: nowrap;
627}
628
629.wt-lifespans-decade {
630    width: 70px;
631    height: 60px;
632    display: inline-block;
633    background-image: url(images/lifespan-decade.png);
634    background-position-y: bottom;
635    background-repeat: no-repeat;
636    background-size: 70px 37px;
637}
638
639.wt-lifespans-individuals {
640    background: #fafafa;
641}
642
643.wt-lifespans-individual {
644
645}
646
647.wt-lifespans-summary {
648    background: #ffffff;
649    border: thin solid #000;
650    z-index: 1;
651}
652
653.wt-lifespans-summary-link {
654    font-weight: bold;
655}
656
657/*-- Pedigree ---- */
658.tvertline {
659    vertical-align: bottom;
660}
661
662.optionbox, .descriptionbox {
663    border: solid #000 1px;
664    vertical-align: top;
665    padding: 3px;
666}
667
668#childbox {
669    padding: 5px;
670    position: absolute;
671    display: none;
672    text-align: start;
673    white-space: nowrap;
674    top: 20px;
675    left: 0;
676}
677
678.layout3 #childbox {
679    top: auto;
680    bottom: 20px;
681}
682
683.person0, .person1, .person2, .person3, .person4, .person5 {
684    border:outset #555 1px;
685    vertical-align:top;
686}
687.person0{
688    background-color:#eee;
689}
690
691.person1{
692    background-color:#bfbfbf;
693}
694
695.person2{
696    background-color:#999;
697}
698
699.person3{
700    background-color:#dfdfdf;
701}
702
703.person4{
704    background-color:#eee;
705}
706
707.person5{
708    background-color:#fefefe;
709}
710
711/*-- timeline  --*/
712#timeline_chart {
713    position: relative;
714    top: 0;
715    left: 0;
716}
717
718/*
719 * Any element that is loaded dynamically has the class wt-ajax-load.
720 * We can provide a "loading" placeholder for empty elements with this class.
721 */
722.wt-ajax-load:empty {
723    height: 32px;
724    background: url(images/loading-32x32.gif) no-repeat 50% 50%;
725}
726
727/*
728 * Default icons are provided by FontAwesome.
729 */
730.wt-icon-anniversary {
731}
732
733.wt-icon-arrow-down {
734}
735
736a > .wt-icon-arrow-down:hover {
737}
738
739.wt-icon-arrow-left {
740}
741
742a > .wt-icon-arrow-left:hover {
743}
744
745.wt-icon-arrow-right {
746}
747
748a > .wt-icon-arrow-right:hover {
749}
750
751.wt-icon-arrow-up {
752}
753
754a > .wt-icon-arrow-up:hover {
755}
756
757.wt-icon-bing-maps {
758}
759
760.wt-icon-calendar {
761}
762
763.wt-icon-collapse {
764}
765
766.wt-icon-coordinates {
767}
768
769.wt-icon-copy {
770}
771
772.wt-icon-delete {
773}
774
775.wt-icon-edit {
776}
777
778.wt-icon-expand {
779}
780
781.wt-icon-family {
782}
783
784.wt-icon-google-maps {
785}
786
787.wt-icon-help {
788}
789
790.wt-icon-individual {
791}
792
793.wt-icon-keyboard {
794}
795
796.wt-icon-media {
797}
798
799.wt-icon-note {
800}
801
802.wt-icon-openstreetmap {
803}
804
805.wt-icon-preferences {
806}
807
808.wt-icon-reorder {
809}
810
811.wt-icon-repository {
812}
813
814.wt-icon-sex-f {
815    color: var(--sex-m-fg);
816}
817
818.wt-icon-sex-m {
819    color: var(--sex-m-fg);
820}
821
822.wt-icon-sex-u {
823    color: var(--sex-u-fg);
824}
825
826.wt-icon-sex-x {
827    color: var(--sex-u-fg);
828}
829
830.wt-icon-source {
831}
832
833.wt-icon-submitter {
834}
835
836.wt-icon-warning {
837}
838
839.wt-icon-zoom-in {
840}
841
842.wt-icon-zoom-out {
843}
844
845/* Miscellaneous images */
846.icon-cfamily {
847}
848
849.icon-childless {
850    content: url(images/childless.png);
851}
852
853.icon-children {
854    content: url(images/children.png);
855}
856
857.icon-edit_indi {
858    content: url(minimal/images/edit_indi.png);
859}
860
861.icon-fam-list {
862    content: url(minimal/images/sfamily.png);
863}
864
865.icon-indi-list {
866    content: url(minimal/images/indis.png);
867}
868
869.icon-loading-small {
870    content: url(images/indicator.gif);
871}
872
873.icon-loading-large {
874    content: url(images/loading-32x32.gif);
875}
876
877.icon-minus {
878    content: url(icons/minus.png);
879}
880
881.icon-mypage {
882    content: url(minimal/images/mypage.png);
883}
884
885.icon-plus {
886    content: url(icons/plus.png);
887}
888
889.icon-resn-confidential {
890    content: none;
891}
892
893.icon-resn-locked {
894    content: none;
895}
896
897.icon-resn-none {
898    content: none;
899}
900
901.icon-resn-privacy {
902    content: none;
903}
904
905.icon-rings {
906    content: url(images/rings.png);
907}
908
909.icon-selected {
910    content: url(minimal/images/selected.png);
911}
912
913.icon-sfamily {
914    content: url(minimal/images/sfamily.png);
915}
916
917/* Silhouettes on charts */
918.icon-silhouette-F {
919    content: url(minimal/images/silhouette_female_small.png);
920}
921
922.icon-silhouette-M {
923    content: url(minimal/images/silhouette_male_small.png);
924}
925
926.icon-silhouette-U {
927    content: url(minimal/images/silhouette_unknown_small.png);
928}
929
930.icon-indis {
931    content: url(minimal/images/indis.png);
932}
933
934.icon-pedigree {
935    content: url(minimal/images/pedigree.png);
936}
937
938/* Census assistant */
939.wt-census-assistant-form-control:focus {
940    min-width: 12rem;
941}
942
943/* Some blocks show a reduced version on the right-hand side. */
944.wt-side-blocks .wt-side-block-optional {
945    display: none !important;
946}
947
948/* my page chart enhancements */
949.wt-block-content-charts {
950    overflow: auto;
951}
952
953/* Some charts are wider than the page. */
954.wt-chart {
955    overflow-x: auto;
956    overflow-y: hidden;
957}
958
959/* Fit thumbnail into parent on charts */
960.select2-selection.select2-selection--single {
961    min-height: 36px;
962    height: auto;
963    padding: 2px 0;
964}
965
966.select2-container .select2-selection--single .select2-selection__rendered {
967    padding-left: 2px;
968}
969
970.select2-selection--single .NAME {
971    padding-left: 4px;
972}
973
974/*
975 *  These selectors control how the short horizontal lines are positioned in the Charts
976 *  Optimized for Win10 and FF, Chrome and Edge browsers
977 *  	Ancestors
978 *  	Descendants
979 *  	amily book
980 *
981 */
982
983/* Ascentors */
984.wt-chart-ancestors .linea1 {
985    margin-bottom: 4px;
986}
987
988.wt-chart-ancestors .linea2 {
989    margin-bottom: 7px;
990}
991
992.wt-chart-ancestors .linea3 {
993    margin-bottom: 4px;
994}
995
996.wt-chart-ancestors .linea4 {
997    margin-bottom: 7px;
998}
999
1000.wt-chart-ancestors .linea5 {
1001    vertical-align: top;
1002}
1003
1004/* Descendants */
1005.wt-chart-descendants .lined1 {
1006    margin-bottom: 4px;
1007}
1008
1009.wt-chart-descendants .lined2 {
1010    margin-bottom: 7px;
1011}
1012
1013.wt-chart-descendants .lined3 {
1014    margin-bottom: 4px;
1015}
1016
1017.wt-chart-descendants .lined4 {
1018    margin-bottom: 7px;
1019}
1020
1021.wt-chart-descendants .linea5 {
1022    vertical-align: top;
1023}
1024
1025.wt-calendar-month {
1026    border-collapse: collapse;
1027}
1028
1029.wt-calendar-month .wt-page-options-label,
1030.wt-calendar-month .wt-page-options-value {
1031    border: solid grey thin;
1032    padding: 0.2rem;
1033}
1034
1035/* Some menus (e.g. languages) can be longer than a page */
1036.dropdown-menu {
1037    max-height: 30rem;
1038    overflow-x: hidden;
1039}
1040
1041/* Forms */
1042.col-form-label {
1043    font-weight: bold;
1044}
1045
1046/* Accordions */
1047.accordion .wt-icon-expand,
1048.accordion .wt-icon-collapse {
1049    display: none;
1050}
1051
1052.accordion-button:after {
1053    display: block;
1054}
1055