.moaied-display-none { display: none !important; } .moaied-display-none-secondary { display: none !important; } /* ============== START BUTTON ============ */ #moaied-start-button { display: inline-flex; justify-content: center; align-items: center; margin-left: 0.5em; } #moaied-start-png { padding-left: 2px; } /* =================== WRAPPERS =================== */ /* Main container sitting on top of and used to: (a) subtly change it's color, (b) contain the template's sidebar along with the editor */ #moaied__wrapper { height :100%; width :100%; display: flex; justify-content: center; box-sizing: border-box; overflow-x: hidden; /*background: rgba(0,255,0,0.1);*/ } /* Holds the template's sidebar */ #moaied__tplsidebar { } /* =============== EDITOR CONTAINER =============== */ #moaied__editor { height :100%; width :100%; display: flex; padding: 6px 0; padding-right: 40px; /* horizontal padding gets adjusted in javascript */ flex-direction: column; position: relative; box-sizing: border-box; } /* ======= CONTAINER TO HIDE ELEMENTS ======== */ #moaied__hidden_template_elements { display: none; } /* ================= MESSAGE AREA ================= */ #moaied__msg_area { } #moaied__msg_area div { border: 1px solid #AAA; font-size: 14px; padding-top: 6px; padding-bottom: 6px; margin-bottom: 6px; } #moaied__msg_area p { margin: 0; margin-bottom: 6px; padding: 3px 0; } /* ================= ROWS 1 AND 2 ================= */ #moaied__row1, #moaied__row2 { display: flex; justify-content: space-between; position: relative; padding-bottom: 0.3rem; box-sizing: border-box; gap: 15px; } #moaied__topleft { display: flex; min-width: 25px; flex-shrink: 100; } #moaied__row2_left { display: flex; gap: 10px; } #moaied__row2_right { display: flex; justify-content: flex-end; align-items: flex-start; } .moaied-first-to-shrink { flex-shrink: 0; flex-grow: 1; } .moaied-second-to-shrink { flex-shrink: 1; flex-grow: 0; } /* ================= SIDEBAR ================= */ #moaied__sidebar { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: 28px; right: -37px; width: 34px; } a.moaied-sidebutton { display: flex; align-items: center; justify-content: center; position: relative; width: 34px; margin: 3px 0; padding: 5px 0; color: #666 !important; border-radius: 3px; cursor: pointer; } a.moaied-sidebutton:hover { color: #000 !important; background: #666 !important; color: white !important; } .moaied-sidebutton svg { width: 24px; height: inherit; } /* =========== VARIOUS SMALL ELEMENTS =========== */ #moaied__autoscrolling_indicator { display: flex; justify-content: center; align-items: center; position: fixed; top: 5px; right: 0px; width: 36px; height: 34px; opacity: 0; transition: opacity 0.2s; } #moaied__autoscrolling_indicator svg { position: absolute; width: auto; height: auto; animation: moaied-updown-animation 1s infinite linear; color: black; opacity: 0.25; height: 65%; width: auto; } @keyframes moaied-updown-animation { 0% {top: 0px;} 50% {top: 10px;} 100% {top: 0px;} } /* ============== BOTTOM RIGHT ============ */ #moaied__bottom_right { position: absolute; top: -130px; right: -40px; width: 40px; height: 130px; /* flex container */ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } /* ================= LOGO ================= */ #moaied__logo { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; color: black; opacity: 0.4; margin-bottom: auto; } #moaied__logo:hover { opacity: 0.55; } #moaied__logo svg { width: 62%; height: auto; opacity: 0.5; margin-bottom: 3px; } #moaied__logo div { font-size: 9px; line-height: 1.2; } #moaied__logo i { font-size: 11px; font-style: normal; opacity: 0.85; line-height: 1.3; } /* Make it dissapear if the on screen keyboard appears, or screen is to short */ @media (max-height: 510px) { #moaied__logo { display: none; } } /* ================= FOOTER ================= */ #moaied__footer { display: flex; justify-content: space-between; position: relative; padding-top: 0.3rem; box-sizing: border-box; gap: 20px; } #moaied__docinfo { display: flex; align-items: center; } #moaied__docinfo i { opacity: 0.7; font-style: normal; } /* =========== DOCINFO DISK PATH ========== */ #moaied__diskpath i { opacity: 0.7; font-style: normal; } /* ================= PAGE ID (wiki namespace path) ================= */ #moaied__pageid { display: flex; align-items: center; color: #333; flex-shrink: 10000; overflow: hidden; white-space:nowrap; margin-left: 4px; min-width: 0; } #moaied__pageid a { color: rgb(0,70,180); text-decoration: none; min-width: 0; /* Ellipsis on the left */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; } #moaied__pageid a:hover { text-decoration: underline; } #moaied__pageid span { padding: 0 3px; color: #555; } /* ================= TABLE OF CONTENTS ================= */ /* Container */ #moaied__toc { display: flex; flex-direction: column; min-width: 0; } /* Title */ #moaied__toc_label { display: none; } .phone #moaied__toc_label { display: block; } /* Dropdowns container */ #moaied__toc_dropdowns { display: flex; flex-direction: row; flex-wrap: nowrap; min-width: 0; } /* All dropdowns */ #moaied__toc select { padding-left: 5px; padding-right: 5px; min-height: 2rem; color: #222; background: white; border-radius: .1rem; border: 1px solid #CCC; box-shadow: none; vertical-align: middle !important; } #moaied__toc select:active, #moaied__toc select:focus, #moaied__toc select:hover { color: #333; background: #fff; border: 1px solid #CCC; outline: none; } /* Wrapper arround section and dummy dropdowns */ #moaied__toc_wrapper { position: relative; min-width: 0; } /* Sections and dummy dropdowns */ #moaied__toc_wrapper select { min-width: 0; min-height: 2rem; } /* Dummy dropdown */ #moaied__toc_dummy { position: absolute; pointer-events:none; top: 0; left: 0; } #moaied__toc_sections { } /* Depth Chooser */ #moaied__toc_depth{ margin-left: 6px; padding-left: 8px; padding-right: 8px; } /* ================= BUTTONS ================= */ /* Buttons container */ #moaied__buttons { display: flex; flex-wrap: nowrap; gap: 5px; } /* Button */ button.moaied-button { display: inline-flex; align-items: center; justify-content: center; position: relative !important; padding: 0px 5px !important; margin: 0; opacity: 1; transition: none !important; color: #fff; background: #286da8; min-height: 1.8rem; border-radius: .2rem !important; border: none !important; } button.moaied-button:active, button.moaied-button:focus, button.moaied-button:hover { color: #fff !important; background: #286da8 !important; outline: none !important; } button.moaied-button:hover { filter: brightness(120%) !important; } button.moaied-button:disabled, button.moaied-button:hover:disabled { color: rgba(255,255,255) !important; background: #bbb !important; opacity: 0.7 !important; border: none !important; filter: none !important; pointer-events: none !important; } .moaied-button span { display: inline-flex; align-items: center; justify-content: center; } .moaied-button i { display: flex; align-items: stretch; justify-content: center; } .moaied-button svg { width: 22px; height: inherit; } .moaied-button.text { padding: 0px 0.6rem !important; } /* Gray */ .moaied-button.gray { color: rgba(255,255,255,0.6) !important; background: #aaa !important; } button.moaied-button.gray:active, button.moaied-button.gray:focus, button.moaied-button.gray:hover { background: #aaa !important; } /* Black */ .moaied-button.darkgray { background: #888 !important; } button.moaied-button.darkgray:active, button.moaied-button.darkgray:focus, button.moaied-button.darkgray:hover { background: #888 !important; } /* Green */ .moaied-button.green { background: #3A4 !important; } button.moaied-button.green:active, button.moaied-button.green:focus, button.moaied-button.green:hover { background: #3A4 !important; } /* Transparent */ .moaied-button.transparent { background: none !important; color: #555 !important; } button.moaied-button.transparent:active, button.moaied-button.transparent:focus, button.moaied-button.transparent:hover { background: none !important; color: #555 !important; } /* Bigger icon */ button.moaied-button.icon120 svg { width: 130%; height: auto; opacity: 0.65; } /* Back button */ .moaied-button.back { margin-left: 0 !important; } .moaied-button.back .moaied-tooltip-text { left: 60px !important; } /* Separator */ .moaied-button-separator { width: 0.9rem; } /* ------- PREVIEW BUTTON --------- */ #moaied__btn_preview { width: 5rem; } #moaied__btn_preview img { display: none; height: 16px; animation: sp-rotate-animation 3s infinite linear; } @keyframes sp-rotate-animation { 0% {transform: rotate(0deg);} 50% {transform: rotate(180deg);} 100% {transform: rotate(360deg);} } #moaied__btn_preview.moaied-loading { cursor: progress; pointer-events: none; } #moaied__btn_preview.moaied-loading span { display: none; } #moaied__btn_preview.moaied-loading img { display: block; } #moaied__btn_preview.moaied-error { color: red !important; } /* ================= DRAFT-AUTOSAVE INDICATOR ================= */ #moaied__draft_save_indicator { position: absolute; top: 3px; left: 3px; } #moaied__draft_save_indicator div { display: block; opacity: 0; width: 2px; height: 2px; border-radius: 2px; background: #3C6; border: 1px solid rgba(255,255,255,0.3); box-shadow: 1px 1px rgba(0,0,0,0.3); animation: moaied-draft-animation 6s linear; } @keyframes moaied-draft-animation { 0% {opacity: 0; transform: scale(.5) } 2.5% {opacity: 1; transform: scale(2) } 5% {opacity: 1; transform: scale(1) } 90% {opacity: 1;} 100% {opacity: 0;} } /* Tooltip green dot */ .moaied-tooltip-text em { display: inline-block; height: 6px; width: 6px; border-radius: 3px; background: #3C6; margin-right: 5px; margin-bottom: 2px; } /* ================= TOOLTIPS ================= */ /* Lower z-index */ .moaied-zindex-40 { z-index: 40 !important; } .moaied-zindex-30 { z-index: 30 !important; } /* Tooltip container */ .moaied-tooltip { position: relative !important; z-index: 50; } /* Tooltip text */ .moaied-tooltip-text { pointer-events: none; display: block; position: absolute; visibility: hidden; background-color: black; color: #ffffff; text-align: center; padding: 5px 0; border-radius: 6px; width: 128px !important; top: 110%; left: 50%; margin-left: -64px; /* Use half of the width (130/2 = 65), to center the tooltip */ font-size: 14px; } .moaied-tooltip-left { width : 116px !important; left : -55px !important; top : 2px !important; } .moaied-tooltip-text i { opacity: 0.6; font-style: normal; display: inline; } .moaied-tooltip-text hr { margin: 0; padding: 0; height: 0px; color: none; background: none; font-size: 0; border: none; border-bottom: 1px dashed #555; margin: 5px 30px; } .moaied-tooltip-text hr { margin: 0; padding: 0; height: 0px; color: none; background: none; font-size: 0; border: none; border-bottom: 1px dashed #555; margin: 5px 15px; } /* Hover */ #moaied__editor .moaied-tooltip:hover .moaied-tooltip-text { visibility: visible; } /* =============== DOKUWIKI TOOLBAR ================ */ #moaied__editor .toolbutton { display: inline-flex !important; justify-content: center !important; align-items: center !important; height: 28px !important; width: 28px !important; padding: 0 !important; border: 1px solid #BBB; margin: 0 !important; margin-right: 1px !important; background: rgba(255,255,255,0.7); } /* ================= EDIT SUMMARY ================= */ /* Input fields */ #moaied__editor div.summary { flex-grow: 1; /* flex */ display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; } #moaied__editor .summary label { font-size: 95%; text-wrap: nowrap; white-space: no-wrap; /* flex */ display: flex; align-items: center; justify-content: flex-end; } #moaied__editor .summary label:first-child { flex-grow: 1; } #moaied__editor #edit__summary { height: 1.8rem; min-height: 1.8rem; margin-left: 4px; margin-right: 8px; /* flex */ flex-shrink: 0; min-width: 8rem; /* Not used as it is overriden by the default preferred size of text input elements */ max-width: 20rem; flex-grow: 1; } #moaied__editor #edit__minoredit { margin-right: 5px; /* flex */ flex-shrink: 0; } /* ============== PANES WRAPPER ============= */ /* Panes wrapper (this element allows us to scroll the panes left and right in single-pane view */ #moaied__panes_wrapper { flex:1; min-height:1px; width :100%; position: relative; box-sizing: border-box; overflow-x: auto; scroll-behavior: smooth; /* flex parent */ /*display:flex; align-items:stretch;*/ } .moaied-fullpage-flash { box-shadow: #08F 6px 0, #08F -6px 0; } /* ================= PANES ================= */ /* Textarea */ #moaied__editor #wiki__text { caret-color: black; /* Set caret color here (and not as inline declaration) to support browser darkmode plugins */ } /* Panes container */ #moaied__panes { width :100%; height: 100%; position: relative; min-height:1px; /*padding: 5px;*/ box-sizing: border-box; /* flex parent */ display:flex; align-items:stretch; justify-content: space-between; row-gap: 5px; column-gap: 3px; } #moaied__panes.column { flex-direction: column; } /* Single pane view */ .moaied-single-pane #moaied__panes { width :200%; } /* Both pane containers */ #moaied__panes > .pane { flex-grow:0; /*flex-shrink:0;*/ margin: 0; position: relative; border:1px solid rgba(0,0,0,0.15); } /* Column layout mode */ #moaied__panes.column > .pane { border:1px solid rgba(0,0,0,0.4); } /* Editors container */ #moaied__editor #dw__editform { box-sizing: border-box; flex-basis:50%; position: relative; resize:none; height:100%; width:100%; background: white; padding: 0; } /* Preview container */ #moaied__preview { box-sizing: border-box; flex-basis:50%; overflow-y: auto; background: #fff; scroll-behavior: smooth; scroll-behavior: auto; height: 100%; padding: 0; box-shadow: none; } #moaied__preview_content { padding: 5px; } /* Left progress bar */ #moaied__left_progressbar { display: none; position: absolute; top: -6px; width: 100%; height: 3px; background: #26D; } /* ================= DEBUG LINE ================= */ #moai__debug { position:fixed; display:flex; align-items: flex-end; justify-content:space-between; font-family:monospace,monospace; bottom:0px; left:0; width:100%; padding:0 12px; color:#5FF; } #moai__debug div { background: rgba(0,0,0,0.7); padding: 5px 10px; white-space: pre; height: 20px; } /* ================= MIRROR ================= */ /* Container */ #moaied__mirror { position: relative; pointer-events: none; height: 100%; width: 100%; background: #FFF; overflow-x: hidden; overflow-y: scroll; } #moaied__mirror_content { height: auto; width: 100%; overflow-x: auto; overflow-y: hidden; } /*#moaied__mirror_content,*/ #moaied__mirror .moaied-mirror-line { position: relative; box-sizing: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; text-decoration: inherit !important; text-indent: inherit !important; text-transform: inherit !important; text-wrap: inherit !important; white-space: inherit !important; word-spacing: inherit !important; word-wrap: inherit !important; white-space-collapse: inherit !important; } /* Line */ #moaied__mirror .moaied-mirror-line { margin: 0; padding: 0; border-radius: 0; color: #222; background: none; /*outline: 1px solid rgba(0,0,0,0.07);*/ } #moaied__mirror .moaied-mirror-line * { font-family: inherit !important; } #moaied__mirror .moaied-mirror-line * u { text-decoration-thickness: 1px; } /* Highlight Match */ .moaied-highlight-match { position: absolute; top: 0; right: 0; height: 100%; width: 100%; z-index: 1; right: 16px; width: 5px; background-image: none; } .moaied-highlight-match.on.header { background: rgba(0,120,250,0.4); } .moaied-highlight-match.on.paragraph { background: rgba(70,170,70,0.4); } /* Highlight Scrollpoints */ #moaied__scrollpoints_overlay { position: absolute; display: none; top: 0; right: 0; height: 100%; z-index: 1; right: 30px; width: 5px; /*background: rgba(0,0,0,0.2);*/ } .moaied-scrollpoint { background: rgba(0,0,0,0.4); position: absolute; width: 100%; } /* ================= SHOW DIRTY AREA ================= */ .moaied-show-dirty-area { position: absolute; display: none; top: 0; right: 0; height: 100%; z-index: 1; right: 13px; width: 5px; background: rgba(250,0,0,0.4); } /* ================= SYNTAX HIGHLIGHT ================= */ /* Header */ .moaied-syntax-header { position: relative; color: rgb(0,100,240, 0.5); background: #def; } .moaied-syntax-header .moaied-syntax-inner { color: rgb(0,100,240); } .moaied-syntax-box { position: absolute; display: inline-block; margin-left: 0.8em; padding: 0.15em .4em; font-size: 70%; color: #555; background: #F0F0F0; border: 1px solid #E0E0E0; } .moaied-syntax-header.H1 { background: rgba(250,0,0,0.1); color: #B00; } .moaied-syntax-header.H1 .moaied-syntax-inner { font-weight: bold; text-decoration: underline; color: #B00; } .moaied-syntax-header.H2 .moaied-syntax-inner { font-weight: bold; text-decoration: underline; } .moaied-syntax-header.H3 .moaied-syntax-inner { text-decoration: underline; } .moaied-syntax-header.H5 .moaied-syntax-inner { color: rgb(0,100,240, 0.6); font-style: italic; } /* ================= CLICKABLE HEADERS ================= */ /* HTML header tags */ .moaied-preview-header { display: flex; align-items: center; } .moaied-preview-header:hover { background: #EEE; cursor: pointer; outline: 1px solid #CCC; } .moaied-scroller-icon { opacity:0; } .moaied-preview-header:hover .moaied-scroller-icon { opacity:1; animation: moaied-aim-animation 0.15s ease-out; } @keyframes moaied-aim-animation { 0% {transform: scale(1.3); opacity:0} 50% {transform: scale(1.1); opacity:1} 100% {transform: scale(1);} } /* =============== FLASH BOX =============== */ .moaied-flashbox { opacity: 0; background: #08F; pointer-events: none; position: absolute; animation: moaied-flashbox-animation 0.5s linear; } .moaied-flashbox.red { background: #F00 !important; } @keyframes moaied-flashbox-animation { 0% {opacity: 1;} 100% {opacity: 0;} } /* ================= HINTS ================= */ div.moaied-hint { position: absolute; pointer-events: none; z-index: 5000; } .moaied-hint span { position: relative; display: flex; visibility: hidden; align-items: center; white-space: nowrap; color: yellow; font-size: 16px; font-weight: bold; padding: 3px 10px; background-color: black; border-radius: 5px; opacity: 0; } .moaied-hint i { font-style: normal; display: inline-block; } /* Arrow right */ .moaied-hint-arrow-right span { padding-right: 5px; } .moaied-hint-arrow-right svg { margin-left: 8px; } .moaied-hint-arrow-right.moaied-hint-animate span { animation: moaied-hint-animation-horizontal 3.5s ease; visibility: visible; } /* Corner arrow left bottom */ .moaied-hint-arrow-corner-left-down span { padding-bottom: 0px; padding-left: 5px; animation-delay: 200ms; } .moaied-hint-arrow-corner-left-down i { padding-bottom: 6px; } .moaied-hint-arrow-corner-left-down svg { margin-right: 8px; } .moaied-hint-arrow-corner-left-down.moaied-hint-animate span { animation: moaied-hint-animation-vertical 3.5s ease; animation-delay: 250ms; visibility: visible; } /* Animations */ @keyframes moaied-hint-animation-horizontal { 0% {left: -5px; opacity: 0} 20% {left: 5px; opacity: 1} 40% {left: -5px;} 60% {left: 5px;} 80% {left: -5px; opacity: 1} 100% {left: 5px; opacity: 0} } @keyframes moaied-hint-animation-vertical { 0% {top: -5px; opacity: 0} 20% {top: 5px; opacity: 1} 40% {top: -5px;} 60% {top: 5px;} 80% {top: -5px; opacity: 1} 100% {top: 5px; opacity: 0} } /*╭───────────────────────────────────────────────────────────╮ │ VERTICAL PHONE LAYOUT │ ╰───────────────────────────────────────────────────────────╯*/ /* ------- Left and Right --------- */ #moaied__phone_left, #moaied__phone_right { height: 100%; width: 50%; padding: 0; margin: 0; display: flex; flex-direction: column; position: relative; box-sizing: border-box; } #moaied__phone_left { overflow-y: scroll; } #moaied__phone_right { } .moaied-phone-row { display: flex; justify-content: space-between; align-items: stretch; padding: 5px 5px; min-width: 0; } .moaied-phone-row > div { display: flex; gap: 5px; } #moaied__phone_debugline { font-size: 15px; } /* ------ Go button ------ */ button.moaied-phone-go-button { padding: 0px 10px !important; } /* -------- Left --------- */ #moaied__phone_left_row1 { gap: 40px; } #moaied__phone_topleft { display: flex; min-width: 25px; flex-shrink: 100; gap: 0; } #moaied__phone_left_row2 { display: flex; justify-content: space-between; gap: 10px; height: 100%; margin-bottom: 20px; } #moaied__phone_left_buttons { display: flex; justify-content: left; gap: 5px; } #moaied__phone_sidebar { flex-shrink: 0; display: flex; flex-direction: column; } #moaied__phone_sidebar #moaied__bottom_right { position: static; margin-top: auto; gap: 20px; } #moaied__phone_sidebar #moaied__logo { margin-bottom: 0; } #moaied__phone_left_main { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: 15px; } #moaied__phone_left_main label, #moaied__phone_left_main label span { font-weight: bold; font-size: 0.8rem; } #moaied__phone_left_main_separator { flex: 100; } #moaied__phone_diskpath label, #moaied__phone_lastmodified label { display: block; } #moaied__phone_diskpath i { opacity: 0.7; font-style: normal; } /* ------- Right --------- */ #moaied__phone_right_header_container { position: relative; z-index: 20; } #moaied__phone_right_header_detachable { position: static; display: flex; flex-direction: column; align-items: stretch; background: rgb(236, 236, 236); width: 100%; z-index: 20; box-shadow: 0 5px 12px rgba(0,0,0,0.15); /* x, y, blur, color */ } #moaied__phone_right_header_detachable.moaied-header-detached { position: absolute; border-bottom: 1px solid rgba(0,0,0,0.35); box-shadow: 0 5px 12px rgba(0,0,0,0.25); /* x, y, blur, color */ } #moaied__phone_right_buttons { padding: 5px 5px; padding-bottom: 1px; } #moaied__phone_right_toolbar { display: flex; flex-wrap: nowrap; align-items: center; padding: 5px 5px; padding-bottom: 0; } #moaied__phone_right_toolbar button { float: none; /* Prevent buttons to wrap in bootstrap3 template */ } /* ================= Media Query ================= */ @media (max-width: 600px) { #moaied__wrapper { display: block; overflow-x: hidden; scroll-behavior: smooth; /*background: rgba(0,255,0,0.1);*/ } #moaied__pageid { margin: 0; } /* Editor container */ #moaied__editor { height :100%; width :200%; display: flex; flex-direction: row; position: relative; box-sizing: border-box; padding: 0; margin: 0; } /* Editor settings buttons */ .moaied-button { padding: 0px 6px !important; } /* Editor action buttons (sidebar) */ a.moaied-sidebutton { margin-top: 7px; } /* Hide tooltips */ .moaied-tooltip-text { display: none !important; } /* Default Dokuwiki toolbar */ #tool__bar { white-space: nowrap; overflow-x: scroll; padding: 0; padding-bottom: 6px; } #moaied__editor .toolbutton { display: inline-flex !important; justify-content: center !important; align-items: center !important; height: 30px !important; width: 30px !important; padding: 0 !important; border: 1px solid #BBB; margin: 0 2px !important; background: rgba(255,255,255,0.7); } /* Table of contents */ #moaied__toc select, #moaied__toc select:focus { color: rgb(0,100,240); /*background: #DEF;*/ border: 1px solid #999; border-radius: 3px; } /* Edit summary */ #moaied__editor div.summary { display: flex; flex-direction: column; align-items: stretch; } #moaied__editor .summary * { margin-left: 0 !important; justify-content: center; min-width: 0; } #moaied__editor .summary label { display: flex; font-size: inherit; min-width: 0; } #moaied__editor .summary label:nth-child(1) { display: flex; flex-direction: column; align-items: stretch; } #moaied__editor .summary label:nth-child(2) { padding-top: 2px; align-self: flex-end; font-size: 90%; } #moaied__editor #edit__summary { max-width: none; margin-right: 0; } /* Panes */ #moaied__panes { flex:1; background: rgba(0,255,0,0.1); display: block; overflow-x: scroll; /* Allow scrolling only with JS */ text-wrap: nowrap; white-space: nowrap; scroll-behavior: smooth; /*pointer-events: none;*/ } /* Editor pane */ #moaied__editor #dw__editform { display: inline-block; padding: 0; height:100%; width:100%; pointer-events: auto; } /* Preview pane */ #moaied__preview { display: inline-block; box-sizing: border-box; text-wrap: auto; white-space: normal; overflow-x:auto; height: 100%; width:100%; pointer-events: auto; } /* Logo */ #moaied__logo { right: 2px; bottom: 20px; } }