@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
CSS
#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*/