PluginProbe ʕ •ᴥ•ʔ
Admin Help Docs / 2.0.2
Admin Help Docs v2.0.2
2.0.2 2.0.1.1 trunk 1.4.3.2 2.0.0 2.0.0.1 2.0.0.2 2.0.1
admin-help-docs / inc / tabs / css / documentation.css
admin-help-docs / inc / tabs / css Last commit date
admin-menu.css 1 week ago documentation.css 1 week ago faq.css 1 week ago import.css 1 week ago settings.css 1 week ago support.css 1 week ago
documentation.css
466 lines
1 h2 { font-size: 1.6rem; color: #1d2327; margin: 1em 0 0.5rem; }
2 h3 { font-size: 1.4rem; color: #1d2327; margin: 1em 0 0.5rem; }
3 h4 { font-size: 1.2rem; color: #1d2327; margin: 1em 0 0.5rem; }
4
5 #documentation {
6 display: flex;
7 gap: 30px;
8 margin-top: 0 !important;
9 }
10
11 /* Sidebar */
12
13 #helpdocs-sidebar {
14 background: #f6f7f8;
15 padding: 16px 12px;
16 border-right: 1px solid #e2e4e7;
17 }
18
19 #helpdocs-docs-list {
20 width: 280px;
21 list-style: none;
22 margin: 0;
23 padding: 0;
24 }
25
26 .helpdocs-folder:not(:first-child) {
27 margin-top: 18px;
28 }
29
30 .helpdocs-folder {
31 margin-bottom: 14px;
32 padding: 6px;
33 border-radius: 12px;
34 background: #ffffff;
35 box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
36 }
37
38 .helpdocs-folder > a {
39 display: flex;
40 align-items: center;
41 justify-content: start;
42 padding: 8px 12px;
43 border-radius: 8px;
44 text-decoration: none;
45 font-weight: 600;
46 background: var( --helpdocs-color-header-tab );
47 color: var( --helpdocs-color-header-font ) !important;
48 transition: filter 0.15s ease, transform 0.1s ease;
49 }
50
51 .helpdocs-folder > a:hover {
52 filter: brightness( 0.95 );
53 transform: translateY( -1px );
54 }
55
56 .folder-count {
57 opacity: 0.75;
58 font-weight: 500;
59 }
60
61 .helpdocs-sidebar-item.in-folder {
62 display: none;
63 margin-top: 6px;
64 margin-right: 6px;
65 }
66
67 .helpdocs-sidebar-item.in-folder.active {
68 display: list-item;
69 }
70
71 .helpdocs-sidebar-item.in-active-folder {
72 display: list-item;
73 }
74
75 .helpdocs-sidebar-item.in-folder a {
76 display: flex;
77 align-items: center;
78 gap: 8px;
79 padding: 6px 10px;
80 border-radius: 8px;
81 text-decoration: none;
82 background: #f6f7f8;
83 color: #1d2327;
84 font-size: 13.5px;
85 }
86
87 .helpdocs-sidebar-item.in-folder:not(.active) a {
88 transition: background 0.15s ease, padding-left 0.1s ease;
89 }
90
91 .helpdocs-sidebar-item.in-folder:not(.active) a:hover {
92 background: #eceff1;
93 padding-left: 14px;
94 }
95
96 .helpdocs-sidebar-item.active a {
97 box-shadow: inset 0 2px 4px rgba( 0, 0, 0, 0.08 ),
98 inset 0 1px 2px rgba( 0, 0, 0, 0.05 );
99 transform: translateY( 1px );
100 font-weight: 600;
101 position: relative;
102 cursor: default;
103 pointer-events: none;
104 }
105
106 .helpdocs-sidebar-item.active a::before {
107 content: '';
108 position: absolute;
109 left: -6px;
110 top: 6px;
111 bottom: 6px;
112 width: 3px;
113 border-radius: 3px;
114 }
115
116 .invisible-folder {
117 margin: 18px 0 8px 0;
118 padding: 6px 10px;
119 font-size: 12px;
120 font-weight: 600;
121 text-transform: uppercase;
122 letter-spacing: 0.5px;
123 color: #646970;
124 border-top: 1px solid #e2e4e7;
125 }
126
127 .helpdocs-sidebar-item.not-in-folder {
128 margin: 4px 0;
129 }
130
131 .helpdocs-sidebar-item.not-in-folder a {
132 display: block;
133 padding: 6px 10px;
134 border-radius: 8px;
135 text-decoration: none;
136 background: #ffffff;
137 color: #1d2327;
138 font-size: 13.5px;
139 border: 1px solid #e2e4e7;
140 transition: background 0.15s ease;
141 }
142
143 .helpdocs-sidebar-item.not-in-folder a:hover {
144 background: #f0f2f4;
145 }
146
147 .folder-icon:before {
148 content: "\1F4C1";
149 margin-right: 6px;
150 }
151
152 .active-folder .folder-icon:before {
153 content: "\1F4C2";
154 }
155
156 .file-icon:before {
157 content: "\1F4C4";
158 opacity: 0.7;
159 }
160
161 .file-import-icon:before {
162 content: "\1F4F0";
163 opacity: 0.8;
164 }
165
166 #helpdocs-docs-list li:not(.helpdocs-folder) {
167 padding-inline-start: 0;
168 }
169
170 #helpdocs-docs-list li.helpdocs-folder,
171 #helpdocs-docs-list li.in-folder {
172 padding-inline-start: 1ch;
173 }
174
175 #helpdocs-docs-list li[ draggable="true" ] {
176 cursor: grab;
177 }
178
179 #helpdocs-docs-list li.dragging {
180 opacity: 0.5;
181 }
182
183 #helpdocs-docs-list li.drag-over {
184 outline: 2px dashed var( --helpdocs-color-header-tab );
185 outline-offset: -4px;
186 }
187
188 /* Document Viewer */
189
190 #helpdocs-document-viewer {
191 flex: 1 1 0;
192 padding: 2rem;
193 min-width: 0;
194 overflow-wrap: break-word;
195 word-wrap: break-word;
196 word-break: break-word;
197 }
198
199 #helpdoc-header {
200 margin-bottom: 2rem;
201 }
202
203 #helpdoc-header h2 {
204 font-size: 2rem;
205 border-top: 0 !important;
206 padding-top: 0 !important;
207 margin-top: 0 !important;
208 margin-bottom: 1.5rem;
209 display: inline;
210 line-height: 1.2;
211 }
212
213 #edit-link {
214 float: right;
215 margin-left: 1rem;
216 }
217
218 #edit-link a {
219 display: inline-flex;
220 align-items: center;
221 gap: 4px;
222 font-size: 0.875rem;
223 background: #F6F7F8;
224 padding: 2px 6px;
225 border-radius: 4px;
226 text-decoration: none;
227 transition: filter 0.15s, color 0.15s;
228 }
229
230 #edit-link a:hover {
231 filter: brightness( 0.97 );
232 }
233
234 #helpdocs-meta {
235 display: block;
236 margin-top: 0.5rem;
237 font-style: italic;
238 font-size: 0.73rem;
239 opacity: 0.73;
240 }
241
242 #helpdoc-content {
243 padding-top: 1rem;
244 }
245
246 #helpdoc-content ul {
247 list-style: square;
248 padding: revert;
249 }
250 #helpdoc-content ol {
251 margin-left: 35px;
252 }
253 #helpdoc-content ol li {
254 padding-left: 10px;
255 }
256 #helpdoc-content ul li {
257 padding-inline-start: 1ch;
258 }
259 #helpdoc-content ul, #helpdoc-content ol {
260 padding-top: 10px;
261 padding-bottom: 5px;
262 }
263 #helpdoc-content ol li ol { list-style-type: lower-alpha !important; }
264 #helpdoc-content ol li ol li ol { list-style-type: lower-roman !important; }
265 #helpdoc-content ol li ol li ol li ol { list-style-type: decimal !important; }
266 #helpdoc-content ol li ol li ol li ol li ol { list-style-type: lower-alpha !important; }
267 #helpdoc-content ol li ol li ol li ol li ol li ol { list-style-type: lower-roman !important; }
268 #helpdoc-content ol li ol li ol li ol li ol li ol li ol { list-style-type: decimal !important; }
269 #helpdoc-content ol li ol li ol li ol li ol li ol li ol li ol { list-style-type: lower-alpha !important; }
270 #helpdoc-content ol li ol li ol li ol li ol li ol li ol li ol li ol { list-style-type: lower-roman !important; }
271
272 #helpdocs-document-viewer img {
273 max-width:100%;
274 height: auto;
275 object-fit: contain;
276 }
277 #search-bar {
278 float: right;
279 margin-right: 20px;
280 margin-top: -7px;
281 }
282 #no-docs-found {
283 padding: 3rem;
284 font-style: italic;
285 }
286 .helpdocs_form_sending {
287 line-height: 2.25;
288 font-style: italic;
289 margin-left: 10px;
290 display: none;
291 }
292 .helpdocs_form_sending:after {
293 display: inline-block;
294 animation: dotty steps(1,end) 1s infinite;
295 content: '';
296 }
297 @keyframes dotty {
298 0% { content: ''; }
299 25% { content: '.'; }
300 50% { content: '..'; }
301 75% { content: '...'; }
302 100% { content: ''; }
303 }
304 .helpdocs_form_result {
305 color: white;
306 font-weight: 500;
307 width: fit-content;
308 border-radius: 4px;
309 padding: 6px 10px;
310 }
311 .helpdocs_form_result.success {
312 background-color: green;
313 display: inline-block;
314 margin-left: 10px;
315 }
316 .helpdocs_form_result.fail {
317 background-color: red;
318 margin-top: 10px;
319 }
320 .action-links {
321 display: inline-block;
322 margin-right: 10px;
323 }
324 .highlight {
325 background: yellow;
326 }
327 .extra-bracket {
328 display: none;
329 }
330
331 /* Page TOC */
332
333 #page-toc {
334 margin: 0 0 4rem 0;
335 padding: 20px 22px 18px;
336 background: linear-gradient( to bottom, #ffffff, #f6f7f8 );
337 border: 1px solid #d0d5da;
338 border-radius: 12px;
339 box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.9 ) inset,
340 0 2px 4px rgba( 0, 0, 0, 0.05 );
341 max-width: 520px;
342 }
343
344 #page-toc::before {
345 content: "On this page";
346 display: block;
347 font-size: 12px;
348 font-weight: 600;
349 text-transform: uppercase;
350 letter-spacing: 0.06em;
351 color: #6b7280;
352 margin-bottom: 14px;
353 }
354
355 #page-toc ul,
356 #page-toc ol {
357 list-style-position: outside;
358 margin: 0;
359 padding: 0 0 0 20px;
360 }
361
362 #page-toc ul {
363 list-style-type: square;
364 }
365
366 #page-toc ol {
367 list-style-type: decimal;
368 }
369
370 #page-toc li {
371 margin: 4px 0;
372 line-height: 1.45;
373 position: relative;
374 }
375
376 #page-toc li > ul,
377 #page-toc li > ol {
378 margin-top: 6px;
379 }
380
381 #page-toc ol li ol { list-style-type: lower-alpha; }
382 #page-toc ol li ol li ol { list-style-type: lower-roman; }
383 #page-toc ol li ol li ol li ol { list-style-type: decimal; }
384
385 #page-toc a {
386 display: block;
387 padding: 2px 8px;
388 margin-left: -8px;
389 border-radius: 6px;
390 transition: background 0.12s ease,
391 box-shadow 0.12s ease,
392 transform 0.05s ease;
393 }
394
395 #page-toc a:hover {
396 background: #ffffff;
397 box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
398 transform: translateY( -1px );
399 text-decoration: none;
400 }
401
402 #page-toc a:active {
403 background: #eef1f3;
404 box-shadow: inset 0 2px 4px rgba( 0, 0, 0, 0.08 );
405 transform: translateY( 1px );
406 }
407
408 /* Alerts */
409
410 #helpdocs-alert-imports {
411 display: none;
412 position: fixed;
413 bottom: 3rem;
414 right: 2rem;
415 background: red;
416 color: white;
417 padding: 20px;
418 border-radius: 10px;
419 border: 2px solid black;
420 box-shadow: 4px 4px 16px;
421 font-weight: 600;
422 font-size: medium;
423 }
424 #helpdocs-alert-imports .close {
425 position: absolute;
426 top: -5px;
427 right: -5px;
428 background: white;
429 border: 2px solid black;
430 color: black !important;
431 font-weight: bold;
432 border-radius: 50%;
433 padding: 0 5px;
434 font-size: 10px;
435 text-decoration: none;
436 }
437
438 /* Drag & Drop */
439
440 .drag-placeholder {
441 background: #e2e4e7;
442 border: 2px dashed #999;
443 margin: 5px 0;
444 list-style: none;
445 pointer-events: none; /* Crucial: ensures dragover hits the items behind it */
446 border-radius: 8px;
447 }
448
449 .folder-placeholder {
450 background: rgba(var(--helpdocs-color-header-tab-rgb), 0.1);
451 border-color: var(--helpdocs-color-header-tab);
452 }
453
454 #helpdocs-docs-list li.dragging {
455 opacity: 0.3;
456 }
457
458 /* Folder Expand/Collapse */
459 ul.folder-children {
460 display: none;
461 margin-left: 1ch; /* optional, aligns child items */
462 }
463
464 ul.folder-children.visible {
465 display: block;
466 }