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