UNPKG

@fa-repo/mobile-dev-environment

Version:

MDE displays a console output tray and extendable action bar inside your browser window.

122 lines (119 loc) 3.76 kB
#mde-action-bar { background: white; box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); position: fixed; top: 10px; z-index: 1; border: thin solid #6e6e6e; } #mde-action-bar[data-corner="tl"] { left: 10px; } #mde-action-bar[data-corner="tr"] { right: 10px; } #mde-action-bar > button { padding: 4px 8px; background: transparent; outline: 0; border: none; cursor: pointer; } #mde-action-bar > button svg { height: 15px; width: 15px; vertical-align: top; fill: #6e6e6e; } #mde-action-bar > button:hover svg { fill: #323232; } #mde-action-bar > button.active svg { fill: black; } #mde-tray { display: none; /* Resize log tray with this button */ } #mde-tray.active { background: #ffe39f; bottom: 0; display: inline-block; font-size: 12px; left: 0; position: fixed; right: 0; } #mde-tray-resize-bar { position: absolute; background: #ffffff; padding: 0; cursor: ns-resize; border: 1px solid #6c6c6c; border-left: none; border-right: none; font-size: 8px; width: 100%; line-height: 9px; outline: 0; letter-spacing: 10px; text-indent: 5px; } #mde-tray #mde-logs { bottom: 0; font-family: monospace; left: 0; overflow-y: scroll; position: absolute; right: 0; top: 10px; } #mde-tray #mde-logs .mde-log { border-bottom: thin solid rgba(0, 0, 0, 0.2); line-height: 17px; display: flex; flex-wrap: wrap; align-items: flex-start; } #mde-tray #mde-logs .mde-log:not(.open):hover { background: rgba(0, 0, 0, 0.01); } #mde-tray #mde-logs .mde-log:before { content: ">"; padding: 8px 0; margin-left: 8px; font-weight: bold; } #mde-tray #mde-logs .mde-log[data-type="error"] .mde-log-message { color: red; } #mde-tray #mde-logs .mde-log[data-type="null"] .mde-log-messag, #mde-tray #mde-logs .mde-log[data-type="undefined"] .mde-log-message { color: #787878; } #mde-tray #mde-logs .mde-log[data-type="number"] .mde-log-messag, #mde-tray #mde-logs .mde-log[data-type="boolean"] .mde-log-message { color: blue; } #mde-tray #mde-logs .mde-log[data-type="htmlcollection"] .mde-log-messag, #mde-tray #mde-logs .mde-log[data-type="object"] .mde-log-message { font-style: italic; } #mde-tray #mde-logs .mde-log .mde-log-amount { background-color: rgba(139, 69, 19, 0.25); border: thin solid rgba(45, 45, 45, 0.8); font-size: 80%; font-weight: bold; line-height: 14px; padding: 1px 3px 0 3px; border-radius: 4px; margin: 8px 0 8px 8px; } #mde-tray #mde-logs .mde-log .mde-log-amount:empty { display: none; } #mde-tray #mde-logs .mde-log .mde-log-message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; padding: 8px 0; margin-left: 8px; } #mde-tray #mde-logs .mde-log .mde-log-trace, #mde-tray #mde-logs .mde-log .mde-log-trace:visited { margin-left: 8px; color: #2d2d2d; text-decoration: underline; padding: 8px 8px 8px 0; } #mde-tray #mde-logs .mde-log .mde-log-message-full { display: none; background: rgba(139, 69, 19, 0.25); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2); flex: 100%; margin: 0 -8px; padding: 4px 16px; } #mde-tray #mde-logs .mde-log-open .mde-log-message { font-weight: bold; } #mde-tray #mde-logs .mde-log-open .mde-log-message-full { display: block; } /*# sourceMappingURL=mde.min.css.map*/