xref: /webtrees/resources/css/_base.css (revision 7203856a81f8be495bda04aa46fc90f386066a40)
1/**
2 * webtrees: online genealogy
3 * Copyright (C) 2023 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/*
17 * Common formatting for all themes.
18 */
19
20@import "_blocks.css";
21@import "_charts.css";
22@import "_colorbox.css";
23@import "_lists.css";
24@import "_markdown.css";
25@import "_maps.css";
26@import "_mime-type-icons.css";
27@import "_on-screen-keyboard.css";
28@import "_pages.css";
29@import "_sortable.css";
30@import "_tab-album.css";
31@import "_tab-relatives.css";
32
33/* Some icons need to be reversed on right-to-left pages */
34/* rtl:ignore */
35[dir=rtl] .wt-icon-flip-rtl
36{
37    transform: scale(-1, 1);
38}
39
40/* rtl:ignore */
41td.align-digits,
42th.align-digits {
43    text-align: right;
44}
45
46/* Keep the page as tall as the window, so the footer can remain at the bottom. */
47body {
48    display: flex;
49    min-height: 100vh;
50    flex-direction: column;
51}
52
53main {
54    flex: 1;
55}
56
57/* Bootstrap 5 underlines links by default */
58a {
59    text-decoration: none;
60}
61
62a:hover {
63    text-decoration: underline;
64}
65
66/* Scrollbars */
67.wt-global {
68    /* Prevent redraws when dynamic content requires a scrollbar. */
69    overflow-y: scroll;
70    /* Any wide content will have its own horizontal scrollbar */
71    overflow-x: hidden;
72}
73
74/* Browsers only understand US English */
75[lang=en-AU] q,
76[lang=en-GB] q {
77    quotes: "‘" "’" "“" "”";
78}
79
80/* Expand/collapse icons on accordions, etc. */
81[data-bs-toggle=collapse][aria-expanded=true] > .wt-icon-expand {
82    display: none;
83}[data-bs-toggle=collapse][aria-expanded=false] > .wt-icon-collapse {
84    display: none;
85}
86
87/* Accordions */
88.accordion-button,
89.accordion-button:not(.collapsed) {
90    background-color: rgba(0,0,0,.03);
91    color: currentcolor;
92}
93
94.accordion-button:after {
95    display: none;
96}
97
98/* Link styling */
99a, .btn-link, .nav-link {
100    color: var(--link-color);
101    text-decoration: var(--link-decoration);
102}
103
104a:hover, .btn-link:hover, .nav-link:hover {
105    color: var(--link-color-hover);
106    text-decoration: var(--link-decoration-hover);
107}
108
109/* Some menus (e.g. languages) can be longer than a page */
110.dropdown-menu {
111    max-height: 90vh;
112    overflow-x: hidden;
113    scrollbar-gutter: stable;
114}
115
116/* User-generated text */
117.ut {
118    /* RTL text on LTR pages (or vice-versa) */
119    unicode-bidi: isolate;
120
121    /* Long words without spaces can break the page layout */
122    overflow-wrap: break-word;
123}
124
125.wt-nested-edit-fields {
126    padding-left: 1rem;
127    margin-left: 1rem;
128    border-left: solid 4px grey;
129}
130
131.wt-text-overflow-elipsis {
132    white-space: nowrap;
133    overflow: hidden;
134    text-overflow: ellipsis;
135}
136
137/* Enter/exit fullscreen mode */
138.wt-icon-exit-fullscreen {
139    display: none;
140}
141.wt-icon-enter-fullscreen {
142    display: inline;
143}
144:fullscreen .wt-icon-exit-fullscreen {
145    display: inline;
146}
147:fullscreen .wt-icon-enter-fullscreen {
148    display: none;
149}
150
151/* Leaflet sets this to 1000, which conflicts with bootstrap dropdowns */
152.leaflet-bottom, .leaflet-top {
153    z-index: 999;
154}
155