1
2
3ul.settingstree_explorer{
4  list-style-type: none;
5  margin: 0;
6  padding: 0;
7}
8.settingstree_explorer_root{
9  font-size: 90%;
10  width: 100%;
11  margin: 1em 0;
12  min-height: 300px;
13  max-height: 800px;
14  float: left;
15  overflow: auto;
16  border: 1px solid #ccc;
17  text-align: left;
18}
19
20.settingstree_explorer_root .folder > .li > a:before,
21.settingstree_explorer_root.folder > .li > a:before{
22	content: "";
23	display: inline-block;
24	width: 9px; height: 9px;
25	margin-right: 5px;
26}
27.settingstree_explorer_root .folder.open> .li > a:before,
28.settingstree_explorer_root.folder.open> .li > a:before{
29	background: url('../../images/minus.gif');
30}
31.settingstree_explorer_root .folder.closed> .li > a:before,
32.settingstree_explorer_root.folder.closed> .li > a:before{
33	background: url('../../images/plus.gif');
34}
35.settingstree_explorer_root .folder.closed> ul.settingstree_explorer,
36.settingstree_explorer_root.folder.closed> ul.settingstree_explorer{
37	display: none;
38}
39.settingstree_explorer_root .folder.open.loading> .li:after,
40.settingstree_explorer_root.folder.open.loading> .li:after{
41	content: "Loading...";
42	margin-left: 10px;
43	display: block;
44}
45
46.settingstree_explorer_selected{
47	font-weight: bold;
48}
49/* settingstree and the hierarchy history goes to left column (25%) */
50.settingstree_left{
51	float: left;
52	width: 25%;
53	margin: 0;
54	box-sizing: border-box;
55}
56.settingstree_left_column{
57	clear: left;
58}
59/* explorertree takes 25%, this takes the rest */
60.settingstree_right{
61	float: right;
62	width: 75%;
63	margin: 0;
64	box-sizing: border-box;
65}
66
67.settingstree_area #config__manager table tr td .input_area input,
68.settingstree_area #config__manager table tr td .input_area textarea,
69.settingstree_area #config__manager table tr td .input_area select,
70.settingstree_area #config__manager table tr td .input_area div.input
71{
72	width: 100%;
73	margin: 0;
74}
75.settingstree_area  #config__manager td.label{
76	position: relative;
77    padding: 1.2em 1em 0.6em 1em;
78}
79.settingstree_area  #config__manager td.label span.outkey{
80	margin: 0;
81	top: 1px;
82	left: 2px;
83	position: absolute;
84}
85
86.settingstree_area #config__manager table tr .input_area{
87	padding: 2px;
88}
89.settingstree_area #config__manager table tr .protect_area.changed,
90.settingstree_area #config__manager table tr  .input_area.changed{
91	background: wheat;
92}
93.settingstree_area #config__manager table tr .protect_area {
94	width: 150px;
95}
96.settingstree_area #config__manager table tr .protect_area label{
97	margin-right: 1em;
98}
99.settingstree_area #config__manager table tr.protected .protect_area label{
100	color: #888;
101}
102
103.settingstree_area .settingstree_buttons{
104	padding: 10px;
105	text-align: right;
106}
107.settingstree_area .settingstree_buttons button{
108	border-radius: 5px;
109	font-size: 120%;
110	margin: 0 0.5em;
111	padding: 0.3em 0.6em;
112}
113.settingstree_area .settingstree_buttons #settingstree_save_button,
114.settingstree_area .settingstree_buttons #settingstree_export_button{
115	background: lightgreen;
116}
117.settingstree_area .settingstree_buttons #settingstree_cancel_button,
118.settingstree_area .settingstree_buttons #settingstree_close_button{
119	background: lightgrey;
120}
121.settingstree_area .settingstree_error_area{
122	margin: 0 1em;
123}
124.settingstree_area .settingstree_error_area >.error *{
125	clear: none;
126}
127
128ul.settings_hierarchy_history li > span > code,
129.settingstree_area  .error code{
130	padding: 1px 4px 1px;
131}
132.settingstree_area  button.settingstree_button_show_hierarchy{
133  position: absolute;
134  font-size: 70%;
135  top: 1px;
136  right: 2px;
137  display: block;
138  background-color: #fff;
139  color: #000;
140  padding: 1px;
141  z-index: 1;
142}
143
144.settingstree_left_column ul.settings_hierarchy_history li.highlighted_level > b{
145	background: lightyellow;
146}
147.settingstree_left_column ul.settings_hierarchy_history > li.title{
148	color: #000;
149}
150.settingstree_left_column ul.settings_hierarchy_history > li.title >b{
151	display: inline;
152	font-weight: bold;
153}
154
155.settingstree_left_column ul.settings_hierarchy_history li > b{
156	display: block;
157	color: #555;
158	x-font-weight: normal;
159	padding: 0 2px;
160	margin-left: -2px;
161}
162
163.settingstree_left_column ul.settings_hierarchy_history li > b.value{
164	color: #000;
165}
166.settingstree_left_column ul.settings_hierarchy_history li > b.protect{
167	color: #000;
168}
169/*.settingstree_left_column ul.settings_hierarchy_history li > b.value:before{
170	content: '+v ';
171	color: blue;
172}
173.settingstree_left_column ul.settings_hierarchy_history li > b.protect:before{
174	content: '+p ';
175	color: red;
176}
177.settingstree_left_column ul.settings_hierarchy_history li > b.protect.value:before{
178	content: '+vp ';
179	color: red;
180}*/
181
182.settingstree_left_column ul.settings_hierarchy_history{
183	font-size: 90%;
184	padding: 0.3em;
185	border: 1px solid #ccc;
186	list-style-type:none;
187
188}
189.settingstree_left_column ul.settings_hierarchy_history li > span{
190	color: #333;
191	display: block;
192}
193.settingstree_left_column ul.settings_hierarchy_history li > span._d{
194	color: #3a3;
195}
196.settingstree_left_column ul.settings_hierarchy_history li > span._v{
197	color: #33a;
198}
199.settingstree_left_column ul.settings_hierarchy_history li > span._v > i._i{
200	color: #a33;
201	font-style: normal;
202	font-size: 90%;
203}
204.settingstree_left_column ul.settings_hierarchy_history li > span._p{
205	color: #a33;
206}
207
208.settingstree_left_column ul.settings_hierarchy_history li{
209	margin-left: 0.8em;
210}
211.settingstree_left_column ul.settings_hierarchy_history li ul{
212	list-style-type:none;
213}
214
215body > #settingstree_grayout{	/* background-grayout covering the whole screen, and fixed to prevent scrollout*/
216   position: fixed;
217   z-index: 1000;
218   top: 0; left: 0; right: 0; bottom: 0;
219   background: rgba(0,0,0,0.3);
220
221}
222#settingstree_grayout > #settingstree_export_popup_container{ /* container helper to positioning */
223   position: relative;
224   width: 0px;
225   margin: 0 auto;
226   height: 100%;
227   box-sizing: border-box;
228}
229
230#settingstree_export_popup_container > .settingstree_export_popup_layer{ /* box that contains the popup contents. negative margin to force centered layout and automatic scrolling inside because the it is fixed.*/
231	position: absolute;
232	padding: 2px;
233	max-height: 100%;
234	overflow: auto;
235	border: 1px solid #888;
236	box-shadow: 2px 1px 4px #000;
237	background: #fff;
238	z-index: 1;
239}
240#settingstree_export_popup_container > .settingstree_export_popup_close_button:after{ /* button at the top right corner of the layer.*/
241	position: absolute;
242	z-index: 2;
243	top: 0px;
244	line-height: 18px;
245	font-size: 20px;
246	content: "x";
247	font-weight: bold;
248	text-align: center;
249	margin-top: -15px;
250	margin-left: -15px;
251	cursor: pointer;
252	width: 20px;
253	height: 20px;
254	background: #fff;
255	border: 2px solid black;
256	border-radius: 50%;
257	padding: 2px;
258	box-shadow: 1px 0px 2px #000;
259}
260
261@media (max-width:799px){
262	body > #settingstree_grayout{
263	   padding: 30px 0;
264	}
265	#settingstree_export_popup_container > .settingstree_export_popup_layer{
266		margin: 0 -288px;
267		width: 570px;
268	}
269	#settingstree_export_popup_container > .settingstree_export_popup_close_button:after{
270		left: 288px;
271	}
272
273}
274@media (min-width: 800px) and (max-width:1024px){
275	body > #settingstree_grayout{
276	   padding: 70px 0;
277	}
278	#settingstree_export_popup_container > .settingstree_export_popup_layer{
279		margin: 0 -388px;
280		width: 770px;
281	}
282	#settingstree_export_popup_container > .settingstree_export_popup_close_button:after{
283		left: 388px;
284	}
285}
286@media (min-width: 1025px){
287	body > #settingstree_grayout{
288	   padding: 100px 0;
289	}
290	#settingstree_export_popup_container > .settingstree_export_popup_layer{
291		margin: 0 -488px;
292		width: 970px;
293	}
294	#settingstree_export_popup_container > .settingstree_export_popup_close_button:after{
295		left: 488px;
296	}
297}
298
299
300.tpl_dokuwiki  #dokuwiki__pagetools {
301 z-index: 3; /* this is needed, because we use absolute positioned buttons, and it looks crappy with default template... other templates should include this for their static positioned parts anyway... */
302}
303