1/**
2 * This file provides styles for the general layout structure.
3 *
4 * @author Anika Henke <anika@selfthinker.org>
5 * @author Klaus Vormweg <klaus.vormweg@gmx.de>
6 */
7
8#dokuwiki__site {
9  margin: 0;
10  padding: 0;
11  max-width: __site_width__;
12  display: flex;
13  flex-direction: column;
14  min-height: 100vh;
15}
16
17
18/* The 2-column wrapper */
19#layout-container {
20  display: flex;
21  align-items: stretch; /*ensures children fill container height */
22  min-height: 100%; /* optional for full-screen height */
23}
24
25
26/* LEFT SIDEBAR COLUMN */
27#layout-sidebar {
28  width: __sidebar_width__;       /* or use your __sidebar_width__ from style.ini */
29  background: __sidebar_background__; /* example background color */
30  flex-shrink: 0;
31  display: flex;
32  flex-direction: column;
33  padding:10px;
34  top:10px;
35}
36
37
38#dokuwiki__aside {
39  position: sticky;
40  top: 10px; /* or adjust to match header height if needed */
41  align-self: flex-start; /* ensures it doesn't stretch vertically */
42  display: flex;
43  flex-direction: column;
44  max-height: 100vh;
45  overflow-y: auto;
46  z-index: 1; /* ensures it appears above background content */
47}
48
49#dokuwiki__aside > .pad {
50  margin: 0;
51}
52
53[dir=rtl] #dokuwiki__aside > .pad {
54  margin: 0 0 0 1.5em;
55}
56
57/* The main content area below header (still in right column) */
58#dokuwiki__content {
59  flex: 1;  /* grow to fill vertical space */
60  overflow: auto; /* if needed for scrolling */
61  padding: 1em;
62  box-sizing: border-box;
63}
64
65
66/* The main column, stacked: header at top, content next, etc. */
67#layout-maincolumn {
68  display: flex;
69  flex-direction: column;
70  flex: 1; /* takes remaining horizontal space */
71}
72
73
74/* HEADER BAR in the main column */
75#dokuwiki__header {
76  background: #f4f4f4;
77  /*padding: 0.5em 1em; */
78  padding-top:10px;
79  padding-right:20px;
80  display: flex;
81  justify-content: space-between;
82  align-items: center;
83  box-sizing: border-box;
84  /* no fixed height => auto-resize for search bar */
85}
86
87/* Breadcrumbs truncation if needed */
88#dokuwiki__header .breadcrumbs {
89  flex: 1;
90  white-space: nowrap;
91  overflow: hidden;
92  text-overflow: ellipsis;
93}
94
95
96/* Search bar container */
97#dokuwiki__sitetools {
98  flex-shrink: 0;
99  margin-left: 1em;  /* space from breadcrumbs */
100  bottom:0px;
101}
102
103
104/* Optional: page tools at the bottom, or however you'd like to place it */
105#dokuwiki__pagetools {
106  margin: 0em;
107}
108
109/* Footer styling, if you want it pinned or just normal flow */
110#dokuwiki__footer {
111  margin-top: auto; /* pushes footer to bottom if you want sticky footer */
112  background: #f4f4f4;
113  padding: 1em;
114}
115
116.footer-flex {
117  display: flex;
118  justify-content: space-between;
119  align-items: center;
120  flex-wrap: wrap;
121  font-size: 0.85em;
122  color: #666;
123}
124
125.footer-left {
126  flex-grow: 1;
127  text-align: left;
128  padding: 0.25em 0;
129  word-break: break-word;
130}
131
132.footer-user {
133  white-space: nowrap;
134  text-align: right;
135  padding: 0.25em 0;
136}
137
138.license-block {
139  text-align: center;
140  padding-top: 0.5em;
141}
142
143
144/* Ensure the wrapper is pushed down below the header */
145.wrapper {
146  margin-top: 3em;  /* or more if your search bar is tall */
147}
148
149
150.sidebar-container {
151  background-color: __sidebar_background__;
152  width: __sidebar_width__;
153  flex-shrink: 0;
154  display: flex;
155  flex-direction: column;
156  justify-content: flex-start;
157  box-sizing: border-box;
158  padding: 1em;
159}
160
161.hasSidebar #dokuwiki__content {
162  flex: 1;
163  margin: 0;
164  padding: 0 1em;
165  box-sizing: border-box;
166}
167
168[dir=rtl] .hasSidebar #dokuwiki__content {
169  float: left;
170  margin-left: 0;
171  margin-right: -__sidebar_width__;
172}
173
174[dir=rtl] .hasSidebar .wrapper {
175  margin-right: __sidebar_width__;
176}
177
178#dokuwiki__footer {
179  clear: both;
180}
181
182#dokuwiki__footer div.pad div.license {
183  padding-top: 1em;
184  text-align: center;
185}
186
187@media (max-width: 800px) {
188  .wrapper {
189    flex-direction: column;
190  }
191  .sidebar-container {
192    width: 100%;
193    padding: 0.5em 1em;
194    flex-direction: row;
195    justify-content: space-between;
196    align-items: center;
197  }
198  #dokuwiki__aside {
199    padding: 0;
200  }
201  #dokuwiki__sitetools input[type="text"] {
202    max-width: 200px;
203    width: 100%;
204  }
205}
206
207@media (max-width: 600px) {
208  #dokuwiki__sitetools input[type="text"] {
209    max-width: 150px;
210  }
211}
212
213@media (max-width: 768px) {
214  #layout-container {
215    flex-direction: column;
216  }
217
218  #layout-sidebar {
219    order: -1;           /* Move sidebar to the top */
220    width: 100%;         /* Let it stretch full width */
221  }
222
223  #layout-maincolumn {
224    width: 100%;
225  }
226}