1
2.moaied-display-none {
3    display: none !important;
4}
5.moaied-display-none-secondary {
6    display: none !important;
7}
8/*   ============== START BUTTON ============   */
9
10#moaied-start-button {
11    display: inline-flex;
12    justify-content: center;
13    align-items: center;
14    margin-left: 0.5em;
15}
16#moaied-start-png {
17    padding-left: 2px;
18}
19/*   =================== WRAPPERS ===================   */
20
21/* Main container sitting on top of <body> and used to: (a) subtly change it's color, (b) contain the template's sidebar along with the editor */
22#moaied__wrapper {
23    height :100%;
24    width  :100%;
25    display: flex;
26    justify-content: center;
27    box-sizing: border-box;
28    overflow-x: hidden;
29    /*background: rgba(0,255,0,0.1);*/
30}
31/* Holds the template's sidebar */
32#moaied__tplsidebar {
33}
34/*   =============== EDITOR CONTAINER ===============   */
35
36#moaied__editor {
37    height :100%;
38    width  :100%;
39    display: flex;
40    padding: 6px 0;
41    padding-right: 40px;    /* horizontal padding gets adjusted in javascript */
42    flex-direction: column;
43    position: relative;
44    box-sizing: border-box;
45}
46/*   ======= CONTAINER TO HIDE ELEMENTS ========   */
47#moaied__hidden_template_elements {
48    display: none;
49}
50
51/*   ================= MESSAGE AREA =================   */
52#moaied__msg_area {
53}
54#moaied__msg_area div {
55    border: 1px solid #AAA;
56    font-size: 14px;
57    padding-top: 6px;
58    padding-bottom: 6px;
59    margin-bottom: 6px;
60}
61#moaied__msg_area p {
62    margin: 0;
63    margin-bottom: 6px;
64    padding: 3px 0;
65}
66/*   ================= ROWS 1 AND 2 =================   */
67#moaied__row1,
68#moaied__row2 {
69    display: flex;
70    justify-content: space-between;
71    position: relative;
72    padding-bottom: 0.3rem;
73    box-sizing: border-box;
74    gap: 15px;
75}
76#moaied__topleft {
77    display: flex;
78    min-width: 25px;
79    flex-shrink: 100;
80}
81#moaied__row2_left {
82    display: flex;
83    gap: 10px;
84}
85#moaied__row2_right {
86    display: flex;
87    justify-content: flex-end;
88    align-items: flex-start;
89}
90.moaied-first-to-shrink {
91  flex-shrink: 0;
92  flex-grow: 1;
93}
94.moaied-second-to-shrink {
95  flex-shrink: 1;
96  flex-grow: 0;
97}
98/*   ================= SIDEBAR =================   */
99
100#moaied__sidebar {
101    display: flex;
102    flex-direction: column;
103    justify-content: flex-start;
104    align-items: center;
105    position: absolute;
106    top: 28px;
107    right: -37px;
108    width: 34px;
109}
110a.moaied-sidebutton {
111    display: flex;
112    align-items: center;
113    justify-content: center;
114    position: relative;
115    width: 34px;
116    margin: 3px 0;
117    padding: 5px 0;
118    color: #666 !important;
119    border-radius: 3px;
120    cursor: pointer;
121}
122a.moaied-sidebutton:hover {
123    color: #000 !important;
124    background: #666 !important;
125    color: white !important;
126}
127.moaied-sidebutton svg {
128    width: 24px;
129    height: inherit;
130}
131/*   =========== VARIOUS SMALL ELEMENTS ===========   */
132#moaied__autoscrolling_indicator {
133    display: flex;
134    justify-content: center;
135    align-items: center;
136    position: fixed;
137    top: 5px;
138    right: 0px;
139    width: 36px;
140    height: 34px;
141    opacity: 0;
142    transition: opacity 0.2s;
143}
144#moaied__autoscrolling_indicator svg {
145    position: absolute;
146    width: auto;
147    height: auto;
148    animation: moaied-updown-animation 1s infinite linear;
149    color: black;
150    opacity: 0.25;
151    height: 65%;
152    width: auto;
153}
154@keyframes moaied-updown-animation {
155      0% {top:  0px;}
156     50% {top:  10px;}
157    100% {top:  0px;}
158}
159/*   ============== BOTTOM RIGHT ============   */
160
161#moaied__bottom_right {
162    position: absolute;
163    top: -130px;
164    right: -40px;
165    width: 40px;
166    height: 130px;
167    /* flex container */
168    display: flex;
169    flex-direction: column;
170    justify-content: flex-end;
171    align-items: center;
172}
173/*   ================= LOGO =================   */
174#moaied__logo {
175    display: flex;
176    flex-direction: column;
177    justify-content: flex-end;
178    align-items: center;
179    color: black;
180    opacity: 0.4;
181    margin-bottom: auto;
182}
183#moaied__logo:hover {
184    opacity: 0.55;
185}
186#moaied__logo svg {
187    width: 62%;
188    height: auto;
189    opacity: 0.5;
190    margin-bottom: 3px;
191}
192#moaied__logo div {
193    font-size: 9px;
194    line-height: 1.2;
195}
196#moaied__logo i {
197    font-size: 11px;
198    font-style: normal;
199    opacity: 0.85;
200    line-height: 1.3;
201}
202/* Make it dissapear if the on screen keyboard appears, or screen is to short */
203@media (max-height: 510px) {
204    #moaied__logo {
205        display: none;
206    }
207}
208
209/*   ================= FOOTER =================   */
210
211#moaied__footer {
212    display: flex;
213    justify-content: space-between;
214    position: relative;
215    padding-top: 0.3rem;
216    box-sizing: border-box;
217    gap: 20px;
218}
219#moaied__docinfo {
220    display: flex;
221    align-items: center;
222}
223#moaied__docinfo i {
224    opacity: 0.7;
225    font-style: normal;
226}
227/*   =========== DOCINFO DISK PATH ==========   */
228
229#moaied__diskpath i {
230    opacity: 0.7;
231    font-style: normal;
232}
233/*   ================= PAGE ID (wiki namespace path) =================   */
234
235#moaied__pageid {
236    display: flex;
237    align-items: center;
238    color: #333;
239    flex-shrink: 10000;
240    overflow: hidden;
241    white-space:nowrap;
242    margin-left: 4px;
243    min-width: 0;
244}
245#moaied__pageid a {
246    color: rgb(0,70,180);
247    text-decoration: none;
248    min-width: 0;
249    /* Ellipsis on the left */
250    white-space: nowrap;
251    overflow: hidden;
252    text-overflow: ellipsis;
253    direction: rtl;
254    text-align: left;
255}
256#moaied__pageid a:hover {
257    text-decoration: underline;
258}
259#moaied__pageid span {
260    padding: 0 3px;
261    color: #555;
262}
263/*   ================= TABLE OF CONTENTS =================   */
264
265/* Container */
266#moaied__toc {
267    display: flex;
268    flex-direction: column;
269    min-width: 0;
270}
271/* Title */
272#moaied__toc_label {
273    display: none;
274}
275.phone #moaied__toc_label {
276    display: block;
277}
278/* Dropdowns container */
279#moaied__toc_dropdowns {
280    display: flex;
281    flex-direction: row;
282    flex-wrap: nowrap;
283    min-width: 0;
284}
285/* All dropdowns */
286#moaied__toc select {
287    padding-left: 5px;
288    padding-right: 5px;
289    min-height: 2rem;
290    color: #222;
291    background: white;
292    border-radius: .1rem;
293    border: 1px solid #CCC;
294    box-shadow: none;
295    vertical-align: middle !important;
296}
297#moaied__toc select:active, #moaied__toc select:focus, #moaied__toc select:hover {
298    color: #333;
299    background: #fff;
300    border: 1px solid #CCC;
301    outline: none;
302}
303/* Wrapper arround section and dummy dropdowns */
304#moaied__toc_wrapper {
305    position: relative;
306    min-width: 0;
307}
308/* Sections and dummy dropdowns */
309#moaied__toc_wrapper select {
310    min-width: 0;
311    min-height: 2rem;
312}
313/* Dummy dropdown */
314#moaied__toc_dummy {
315    position: absolute;
316    pointer-events:none;
317    top: 0;
318    left: 0;
319}
320#moaied__toc_sections {
321}
322/* Depth Chooser */
323#moaied__toc_depth{
324    margin-left: 6px;
325    padding-left: 8px;
326    padding-right: 8px;
327}
328/*   ================= BUTTONS =================   */
329
330/* Buttons container */
331#moaied__buttons {
332    display: flex;
333    flex-wrap: nowrap;
334    gap: 5px;
335}
336/* Button */
337button.moaied-button {
338    display: inline-flex;
339    align-items: center;
340    justify-content: center;
341    position: relative !important;
342    padding: 0px 5px !important;
343    margin: 0;
344    opacity: 1;
345    transition: none !important;
346    color: #fff;
347    background: #286da8;
348    min-height: 1.8rem;
349    border-radius: .2rem !important;
350    border: none !important;
351}
352button.moaied-button:active,
353button.moaied-button:focus,
354button.moaied-button:hover {
355    color: #fff !important;
356    background: #286da8 !important;
357    outline: none !important;
358}
359button.moaied-button:hover {
360    filter: brightness(120%) !important;
361}
362button.moaied-button:disabled, button.moaied-button:hover:disabled {
363    color: rgba(255,255,255) !important;
364    background: #bbb !important;
365    opacity: 0.7 !important;
366    border: none !important;
367    filter: none !important;
368    pointer-events: none !important;
369}
370.moaied-button span {
371    display: inline-flex;
372    align-items: center;
373    justify-content: center;
374}
375.moaied-button i {
376    display: flex;
377    align-items: stretch;
378    justify-content: center;
379}
380.moaied-button svg {
381    width: 22px;
382    height: inherit;
383}
384.moaied-button.text {
385    padding: 0px 0.6rem !important;
386}
387/* Gray */
388.moaied-button.gray {
389    color: rgba(255,255,255,0.6) !important;
390    background: #aaa !important;
391}
392button.moaied-button.gray:active,
393button.moaied-button.gray:focus,
394button.moaied-button.gray:hover {
395    background: #aaa !important;
396}
397/* Black */
398.moaied-button.darkgray {
399    background: #888 !important;
400}
401button.moaied-button.darkgray:active,
402button.moaied-button.darkgray:focus,
403button.moaied-button.darkgray:hover {
404    background: #888 !important;
405}
406/* Green */
407.moaied-button.green {
408    background: #3A4 !important;
409}
410button.moaied-button.green:active,
411button.moaied-button.green:focus,
412button.moaied-button.green:hover {
413    background: #3A4 !important;
414}
415/* Transparent */
416.moaied-button.transparent {
417    background: none !important;
418    color: #555 !important;
419}
420button.moaied-button.transparent:active,
421button.moaied-button.transparent:focus,
422button.moaied-button.transparent:hover {
423    background: none !important;
424    color: #555 !important;
425}
426/* Bigger icon */
427button.moaied-button.icon120 svg {
428    width: 130%;
429    height: auto;
430    opacity: 0.65;
431}
432/* Back button */
433.moaied-button.back {
434    margin-left: 0 !important;
435}
436.moaied-button.back .moaied-tooltip-text {
437    left: 60px !important;
438}
439/* Separator */
440.moaied-button-separator {
441    width: 0.9rem;
442}
443/* ------- PREVIEW BUTTON --------- */
444
445#moaied__btn_preview {
446    width: 5rem;
447}
448#moaied__btn_preview img {
449    display: none;
450    height: 16px;
451    animation: sp-rotate-animation 3s infinite linear;
452}
453@keyframes sp-rotate-animation {
454    0% {transform: rotate(0deg);}
455    50% {transform: rotate(180deg);}
456    100% {transform: rotate(360deg);}
457}
458#moaied__btn_preview.moaied-loading {
459    cursor: progress;
460    pointer-events: none;
461}
462#moaied__btn_preview.moaied-loading span {
463    display: none;
464}
465#moaied__btn_preview.moaied-loading img {
466    display: block;
467}
468#moaied__btn_preview.moaied-error {
469    color: red !important;
470}
471/*   ================= DRAFT-AUTOSAVE INDICATOR =================   */
472
473#moaied__draft_save_indicator {
474    position: absolute;
475    top: 3px;
476    left: 3px;
477}
478#moaied__draft_save_indicator div {
479    display: block;
480    opacity: 0;
481    width: 2px;
482    height: 2px;
483    border-radius: 2px;
484    background: #3C6;
485    border: 1px solid rgba(255,255,255,0.3);
486    box-shadow: 1px 1px rgba(0,0,0,0.3);
487    animation: moaied-draft-animation 6s linear;
488}
489@keyframes moaied-draft-animation {
490    0% {opacity: 0; transform: scale(.5) }
491    2.5% {opacity: 1; transform: scale(2) }
492    5% {opacity: 1; transform: scale(1) }
493    90% {opacity: 1;}
494    100% {opacity: 0;}
495}
496/* Tooltip green dot */
497.moaied-tooltip-text em {
498    display: inline-block;
499    height: 6px;
500    width: 6px;
501    border-radius: 3px;
502    background: #3C6;
503    margin-right: 5px;
504    margin-bottom: 2px;
505}
506/*   ================= TOOLTIPS =================   */
507
508/* Lower z-index */
509.moaied-zindex-40 {
510    z-index: 40 !important;
511}
512.moaied-zindex-30 {
513    z-index: 30 !important;
514}
515/* Tooltip container */
516.moaied-tooltip {
517    position: relative !important;
518    z-index: 50;
519}
520/* Tooltip text */
521.moaied-tooltip-text {
522    pointer-events: none;
523    display: block;
524    position: absolute;
525    visibility: hidden;
526    background-color: black;
527    color: #ffffff;
528    text-align: center;
529    padding: 5px 0;
530    border-radius: 6px;
531    width: 128px !important;
532    top: 110%;
533    left: 50%;
534    margin-left: -64px; /* Use half of the width (130/2 = 65), to center the tooltip */
535    font-size: 14px;
536}
537.moaied-tooltip-left {
538    width : 116px !important;
539    left  : -55px !important;
540    top   : 2px !important;
541}
542.moaied-tooltip-text i {
543    opacity: 0.6;
544    font-style: normal;
545    display: inline;
546}
547.moaied-tooltip-text hr {
548    margin: 0;
549    padding: 0;
550    height: 0px;
551    color: none;
552    background: none;
553    font-size: 0;
554    border: none;
555    border-bottom: 1px dashed #555;
556    margin: 5px 30px;
557}
558.moaied-tooltip-text hr {
559    margin: 0;
560    padding: 0;
561    height: 0px;
562    color: none;
563    background: none;
564    font-size: 0;
565    border: none;
566    border-bottom: 1px dashed #555;
567    margin: 5px 15px;
568}
569/* Hover */
570#moaied__editor .moaied-tooltip:hover .moaied-tooltip-text {
571    visibility: visible;
572}
573/*   =============== DOKUWIKI TOOLBAR ================   */
574
575
576#moaied__editor .toolbutton {
577    display: inline-flex !important;
578    justify-content: center !important;
579    align-items: center !important;
580    height: 28px !important;
581    width: 28px !important;
582    padding: 0 !important;
583    border: 1px solid #BBB;
584    margin: 0 !important;
585    margin-right: 1px !important;
586    background: rgba(255,255,255,0.7);
587}
588/*   ================= EDIT SUMMARY =================   */
589
590/* Input fields */
591#moaied__editor div.summary {
592    flex-grow: 1;
593    /* flex */
594    display: flex;
595    align-items: center;
596    justify-content: flex-end;
597    flex-shrink: 0;
598}
599#moaied__editor .summary label {
600    font-size: 95%;
601    text-wrap: nowrap;
602    white-space: no-wrap;
603    /* flex */
604    display: flex;
605    align-items: center;
606    justify-content: flex-end;
607}
608#moaied__editor .summary label:first-child {
609    flex-grow: 1;
610}
611#moaied__editor #edit__summary {
612    height: 1.8rem;
613    min-height: 1.8rem;
614    margin-left: 4px;
615    margin-right: 8px;
616    /* flex */
617    flex-shrink: 0;
618    min-width: 8rem;        /* Not used as it is overriden by the default preferred size of text input elements */
619    max-width: 20rem;
620    flex-grow: 1;
621}
622#moaied__editor #edit__minoredit {
623    margin-right: 5px;
624    /* flex */
625    flex-shrink: 0;
626}
627/*   ============== PANES WRAPPER =============   */
628
629/* Panes wrapper (this element allows us to scroll the panes left and right in single-pane view */
630#moaied__panes_wrapper {
631    flex:1;
632    min-height:1px;
633    width  :100%;
634    position: relative;
635    box-sizing: border-box;
636    overflow-x: auto;
637    scroll-behavior: smooth;
638    /* flex parent */
639    /*display:flex;
640    align-items:stretch;*/
641}
642.moaied-fullpage-flash {
643    box-shadow: #08F  6px 0,
644                #08F -6px 0;
645}
646/*   ================= PANES =================   */
647
648/* Textarea */
649#moaied__editor #wiki__text {
650    caret-color: black;     /* Set caret color here (and not as inline declaration) to support browser darkmode plugins */
651}
652/* Panes container */
653#moaied__panes {
654    width  :100%;
655    height: 100%;
656    position: relative;
657    min-height:1px;
658    /*padding: 5px;*/
659    box-sizing: border-box;
660    /* flex parent */
661    display:flex;
662    align-items:stretch;
663    justify-content: space-between;
664    row-gap: 5px;
665    column-gap: 3px;
666}
667#moaied__panes.column {
668    flex-direction: column;
669}
670/* Single pane view */
671.moaied-single-pane #moaied__panes {
672    width  :200%;
673}
674/* Both pane containers */
675#moaied__panes > .pane  {
676    flex-grow:0;
677    /*flex-shrink:0;*/
678    margin: 0;
679    position: relative;
680    border:1px solid rgba(0,0,0,0.15);
681}
682/* Column layout mode */
683#moaied__panes.column > .pane {
684    border:1px solid rgba(0,0,0,0.4);
685}
686/* Editors container */
687#moaied__editor #dw__editform {
688    box-sizing: border-box;
689    flex-basis:50%;
690    position: relative;
691    resize:none;
692    height:100%;
693    width:100%;
694    background: white;
695    padding: 0;
696}
697/* Preview container */
698#moaied__preview  {
699    box-sizing: border-box;
700    flex-basis:50%;
701    overflow-y: auto;
702    background: #fff;
703    scroll-behavior: smooth;
704    scroll-behavior: auto;
705    height: 100%;
706    padding: 0;
707    box-shadow: none;
708}
709#moaied__preview_content {
710    padding: 5px;
711}
712/* Left progress bar */
713#moaied__left_progressbar  {
714    display: none;
715    position: absolute;
716    top: -6px;
717    width: 100%;
718    height: 3px;
719    background: #26D;
720}
721/*   ================= DEBUG LINE =================   */
722
723#moai__debug {
724    position:fixed;
725    display:flex;
726    align-items: flex-end;
727    justify-content:space-between;
728    font-family:monospace,monospace;
729    bottom:0px;
730    left:0;
731    width:100%;
732    padding:0 12px;
733    color:#5FF;
734}
735#moai__debug div {
736    background: rgba(0,0,0,0.7);
737    padding: 5px 10px;
738    white-space: pre;
739    height: 20px;
740
741}
742/*   ================= MIRROR =================   */
743
744/* Container */
745#moaied__mirror {
746    position: relative;
747    pointer-events: none;
748    height: 100%;
749    width: 100%;
750    background: #FFF;
751    overflow-x: hidden;
752    overflow-y: scroll;
753}
754#moaied__mirror_content {
755    height: auto;
756    width: 100%;
757    overflow-x: auto;
758    overflow-y: hidden;
759}
760/*#moaied__mirror_content,*/
761#moaied__mirror .moaied-mirror-line {
762    position: relative;
763    box-sizing:      inherit !important;
764    font-family:     inherit !important;
765    font-size:       inherit !important;
766    font-weight:     inherit !important;
767    letter-spacing:  inherit !important;
768    line-height:     inherit !important;
769    text-decoration: inherit !important;
770    text-indent:     inherit !important;
771    text-transform:  inherit !important;
772    text-wrap:       inherit !important;
773    white-space:     inherit !important;
774    word-spacing:    inherit !important;
775    word-wrap:       inherit !important;
776    white-space-collapse: inherit !important;
777}
778/* Line */
779#moaied__mirror .moaied-mirror-line {
780    margin: 0;
781    padding: 0;
782    border-radius: 0;
783    color: #222;
784    background: none;
785    /*outline: 1px solid rgba(0,0,0,0.07);*/
786}
787#moaied__mirror .moaied-mirror-line * {
788    font-family:     inherit !important;
789}
790#moaied__mirror .moaied-mirror-line * u {
791    text-decoration-thickness: 1px;
792}
793/* Highlight Match */
794.moaied-highlight-match {
795    position: absolute;
796    top: 0;
797    right: 0;
798    height: 100%;
799    width: 100%;
800    z-index: 1;
801    right: 16px;
802    width: 5px;
803    background-image: none;
804}
805.moaied-highlight-match.on.header {
806    background: rgba(0,120,250,0.4);
807}
808.moaied-highlight-match.on.paragraph {
809    background: rgba(70,170,70,0.4);
810}
811/* Highlight Scrollpoints */
812#moaied__scrollpoints_overlay {
813    position: absolute;
814    display: none;
815    top: 0;
816    right: 0;
817    height: 100%;
818    z-index: 1;
819    right: 30px;
820    width: 5px;
821    /*background: rgba(0,0,0,0.2);*/
822}
823.moaied-scrollpoint {
824    background: rgba(0,0,0,0.4);
825    position: absolute;
826    width: 100%;
827}
828/*   ================= SHOW DIRTY AREA =================   */
829
830.moaied-show-dirty-area {
831    position: absolute;
832    display: none;
833    top: 0;
834    right: 0;
835    height: 100%;
836    z-index: 1;
837    right: 13px;
838    width: 5px;
839    background: rgba(250,0,0,0.4);
840}
841/*   ================= SYNTAX HIGHLIGHT =================   */
842
843/* Header */
844.moaied-syntax-header {
845    position: relative;
846    color: rgb(0,100,240, 0.5);
847    background: #def;
848}
849.moaied-syntax-header .moaied-syntax-inner {
850    color: rgb(0,100,240);
851}
852.moaied-syntax-box {
853    position: absolute;
854    display: inline-block;
855    margin-left: 0.8em;
856    padding: 0.15em .4em;
857    font-size: 70%;
858    color: #555;
859    background: #F0F0F0;
860    border: 1px solid #E0E0E0;
861}
862.moaied-syntax-header.H1 {
863    background: rgba(250,0,0,0.1);
864    color: #B00;
865}
866.moaied-syntax-header.H1 .moaied-syntax-inner {
867    font-weight: bold;
868    text-decoration: underline;
869    color: #B00;
870}
871.moaied-syntax-header.H2 .moaied-syntax-inner {
872    font-weight: bold;
873    text-decoration: underline;
874}
875.moaied-syntax-header.H3 .moaied-syntax-inner {
876    text-decoration: underline;
877}
878.moaied-syntax-header.H5 .moaied-syntax-inner {
879    color: rgb(0,100,240, 0.6);
880    font-style: italic;
881}
882/*   ================= CLICKABLE HEADERS =================   */
883
884/* HTML header tags */
885.moaied-preview-header {
886    display: flex;
887    align-items: center;
888}
889.moaied-preview-header:hover {
890    background: #EEE;
891    cursor: pointer;
892    outline: 1px solid #CCC;
893}
894.moaied-scroller-icon {
895    opacity:0;
896}
897.moaied-preview-header:hover .moaied-scroller-icon {
898    opacity:1;
899    animation: moaied-aim-animation 0.15s ease-out;
900}
901@keyframes moaied-aim-animation {
902    0% {transform: scale(1.3); opacity:0}
903    50% {transform: scale(1.1); opacity:1}
904    100% {transform: scale(1);}
905}
906/*   =============== FLASH BOX ===============   */
907
908.moaied-flashbox {
909    opacity: 0;
910    background: #08F;
911    pointer-events: none;
912    position: absolute;
913    animation: moaied-flashbox-animation 0.5s linear;
914}
915.moaied-flashbox.red {
916    background: #F00 !important;
917}
918@keyframes moaied-flashbox-animation {
919      0% {opacity: 1;}
920    100% {opacity: 0;}
921}
922/*   ================= HINTS =================   */
923
924div.moaied-hint {
925    position: absolute;
926    pointer-events: none;
927    z-index: 5000;
928}
929.moaied-hint span {
930    position: relative;
931    display: flex;
932    visibility: hidden;
933    align-items: center;
934    white-space: nowrap;
935    color: yellow;
936    font-size: 16px;
937    font-weight: bold;
938    padding: 3px 10px;
939    background-color: black;
940    border-radius: 5px;
941    opacity: 0;
942}
943.moaied-hint i {
944    font-style: normal;
945    display: inline-block;
946}
947/* Arrow right */
948.moaied-hint-arrow-right span {
949    padding-right: 5px;
950}
951.moaied-hint-arrow-right svg {
952    margin-left: 8px;
953}
954.moaied-hint-arrow-right.moaied-hint-animate span {
955    animation: moaied-hint-animation-horizontal 3.5s ease;
956    visibility: visible;
957}
958/* Corner arrow left bottom */
959.moaied-hint-arrow-corner-left-down span {
960    padding-bottom: 0px;
961    padding-left: 5px;
962    animation-delay: 200ms;
963}
964.moaied-hint-arrow-corner-left-down i {
965    padding-bottom: 6px;
966}
967.moaied-hint-arrow-corner-left-down svg {
968    margin-right: 8px;
969}
970.moaied-hint-arrow-corner-left-down.moaied-hint-animate span {
971    animation: moaied-hint-animation-vertical 3.5s ease;
972    animation-delay: 250ms;
973    visibility: visible;
974}
975/* Animations */
976@keyframes moaied-hint-animation-horizontal {
977      0% {left: -5px; opacity: 0}
978     20% {left:  5px; opacity: 1}
979     40% {left: -5px;}
980     60% {left:  5px;}
981     80% {left: -5px; opacity: 1}
982    100% {left:  5px; opacity: 0}
983}
984@keyframes moaied-hint-animation-vertical {
985      0% {top: -5px; opacity: 0}
986     20% {top:  5px; opacity: 1}
987     40% {top: -5px;}
988     60% {top:  5px;}
989     80% {top: -5px; opacity: 1}
990    100% {top:  5px; opacity: 0}
991}
992
993/*╭───────────────────────────────────────────────────────────╮
994  │  VERTICAL PHONE LAYOUT                                    │
995  ╰───────────────────────────────────────────────────────────╯*/
996
997/* ------- Left and Right --------- */
998
999#moaied__phone_left,
1000#moaied__phone_right {
1001    height: 100%;
1002    width: 50%;
1003    padding: 0;
1004    margin: 0;
1005    display: flex;
1006    flex-direction: column;
1007    position: relative;
1008    box-sizing: border-box;
1009}
1010#moaied__phone_left {
1011    overflow-y: scroll;
1012}
1013#moaied__phone_right {
1014}
1015.moaied-phone-row {
1016    display: flex;
1017    justify-content: space-between;
1018    align-items: stretch;
1019    padding: 5px 5px;
1020    min-width: 0;
1021}
1022.moaied-phone-row > div {
1023    display: flex;
1024    gap: 5px;
1025}
1026#moaied__phone_debugline {
1027    font-size: 15px;
1028}
1029/* ------ Go button ------ */
1030
1031button.moaied-phone-go-button {
1032    padding: 0px 10px !important;
1033}
1034
1035/* -------- Left --------- */
1036
1037#moaied__phone_left_row1 {
1038    gap: 40px;
1039}
1040#moaied__phone_topleft {
1041    display: flex;
1042    min-width: 25px;
1043    flex-shrink: 100;
1044    gap: 0;
1045}
1046#moaied__phone_left_row2 {
1047    display: flex;
1048    justify-content: space-between;
1049    gap: 10px;
1050    height: 100%;
1051    margin-bottom: 20px;
1052}
1053#moaied__phone_left_buttons {
1054    display: flex;
1055    justify-content: left;
1056    gap: 5px;
1057}
1058#moaied__phone_sidebar {
1059    flex-shrink: 0;
1060    display: flex;
1061    flex-direction: column;
1062}
1063#moaied__phone_sidebar #moaied__bottom_right {
1064    position: static;
1065    margin-top: auto;
1066    gap: 20px;
1067}
1068#moaied__phone_sidebar #moaied__logo {
1069    margin-bottom: 0;
1070}
1071#moaied__phone_left_main {
1072    flex: 1;
1073    display: flex;
1074    flex-direction: column;
1075    align-items: stretch;
1076    min-width: 0;
1077    gap: 15px;
1078}
1079#moaied__phone_left_main label,
1080#moaied__phone_left_main label span {
1081    font-weight: bold;
1082    font-size: 0.8rem;
1083}
1084#moaied__phone_left_main_separator {
1085    flex: 100;
1086}
1087#moaied__phone_diskpath label,
1088#moaied__phone_lastmodified label {
1089    display: block;
1090}
1091#moaied__phone_diskpath i {
1092    opacity: 0.7;
1093    font-style: normal;
1094}
1095/* ------- Right --------- */
1096
1097#moaied__phone_right_header_container {
1098    position: relative;
1099    z-index: 20;
1100}
1101#moaied__phone_right_header_detachable {
1102    position: static;
1103    display: flex;
1104    flex-direction: column;
1105    align-items: stretch;
1106    background: rgb(236, 236, 236);
1107    width: 100%;
1108    z-index: 20;
1109    box-shadow: 0 5px 12px rgba(0,0,0,0.15);          /* x, y, blur, color */
1110}
1111#moaied__phone_right_header_detachable.moaied-header-detached {
1112    position: absolute;
1113    border-bottom: 1px solid rgba(0,0,0,0.35);
1114    box-shadow: 0 5px 12px rgba(0,0,0,0.25);          /* x, y, blur, color */
1115}
1116#moaied__phone_right_buttons {
1117    padding: 5px 5px;
1118    padding-bottom: 1px;
1119}
1120#moaied__phone_right_toolbar {
1121    display: flex;
1122    flex-wrap: nowrap;
1123    align-items: center;
1124    padding: 5px 5px;
1125    padding-bottom: 0;
1126}
1127#moaied__phone_right_toolbar button {
1128    float: none;   /* Prevent buttons to wrap in bootstrap3 template */
1129}
1130/* ================= Media Query ================= */
1131
1132@media (max-width: 600px) {
1133
1134    #moaied__wrapper {
1135        display: block;
1136        overflow-x: hidden;
1137        scroll-behavior: smooth;
1138        /*background: rgba(0,255,0,0.1);*/
1139    }
1140    #moaied__pageid {
1141        margin: 0;
1142    }
1143    /* Editor container */
1144    #moaied__editor {
1145        height :100%;
1146        width  :200%;
1147        display: flex;
1148        flex-direction: row;
1149        position: relative;
1150        box-sizing: border-box;
1151        padding: 0;
1152        margin: 0;
1153    }
1154    /* Editor settings buttons */
1155    .moaied-button {
1156        padding: 0px 6px !important;
1157    }
1158    /* Editor action buttons (sidebar) */
1159    a.moaied-sidebutton {
1160        margin-top: 7px;
1161    }
1162    /* Hide tooltips */
1163    .moaied-tooltip-text {
1164        display: none !important;
1165    }
1166    /* Default Dokuwiki toolbar */
1167    #tool__bar {
1168        white-space: nowrap;
1169        overflow-x: scroll;
1170        padding: 0;
1171        padding-bottom: 6px;
1172    }
1173    #moaied__editor .toolbutton {
1174        display: inline-flex !important;
1175        justify-content: center !important;
1176        align-items: center !important;
1177        height: 30px !important;
1178        width: 30px !important;
1179        padding: 0 !important;
1180        border: 1px solid #BBB;
1181        margin: 0 2px !important;
1182        background: rgba(255,255,255,0.7);
1183    }
1184    /* Table of contents */
1185    #moaied__toc select,
1186    #moaied__toc select:focus {
1187        color: rgb(0,100,240);
1188        /*background: #DEF;*/
1189        border: 1px solid #999;
1190        border-radius: 3px;
1191    }
1192    /* Edit summary */
1193    #moaied__editor div.summary {
1194        display: flex;
1195        flex-direction: column;
1196        align-items: stretch;
1197    }
1198    #moaied__editor .summary * {
1199        margin-left: 0 !important;
1200        justify-content: center;
1201        min-width: 0;
1202    }
1203    #moaied__editor .summary label {
1204        display: flex;
1205        font-size: inherit;
1206        min-width: 0;
1207    }
1208    #moaied__editor .summary label:nth-child(1) {
1209        display: flex;
1210        flex-direction: column;
1211        align-items: stretch;
1212    }
1213    #moaied__editor .summary label:nth-child(2) {
1214        padding-top: 2px;
1215        align-self: flex-end;
1216        font-size: 90%;
1217    }
1218    #moaied__editor #edit__summary {
1219        max-width: none;
1220        margin-right: 0;
1221    }
1222    /* Panes */
1223    #moaied__panes {
1224        flex:1;
1225        background: rgba(0,255,0,0.1);
1226        display: block;
1227        overflow-x: scroll;     /* Allow scrolling only with JS */
1228        text-wrap: nowrap;
1229        white-space: nowrap;
1230        scroll-behavior: smooth;
1231        /*pointer-events: none;*/
1232    }
1233    /* Editor pane */
1234    #moaied__editor #dw__editform {
1235        display: inline-block;
1236        padding: 0;
1237
1238        height:100%;
1239        width:100%;
1240
1241        pointer-events: auto;
1242    }
1243    /* Preview pane */
1244    #moaied__preview  {
1245        display: inline-block;
1246        box-sizing: border-box;
1247
1248        text-wrap: auto;
1249        white-space: normal;
1250        overflow-x:auto;
1251
1252        height: 100%;
1253        width:100%;
1254
1255        pointer-events: auto;
1256    }
1257    /* Logo */
1258    #moaied__logo {
1259        right: 2px;
1260        bottom: 20px;
1261    }
1262}
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272