src/style.css
* {
box-sizing: border-box;
}
html,
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
overflow: hidden;
}
#header {
height: 37px;
padding: 0 12px;
line-height: 36px;
font-size: 14px;
font-weight: bold;
background: #20222a;
color: #eee;
border-bottom: 1px solid #333;
user-select: none;
}
.header-logo {
display: inline-block;
margin: 0 24px 0 0;
font-size: 16px;
}
.header-btn {
display: inline-block;
height: 28px;
margin: 0 8px;
padding: 0 12px;
font: inherit;
line-height: 1;
background: #6a6a6a;
color: #fff;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.header-btn:hover,
.header-btn:focus {
border-color: #eee;
}
.header-btn:disabled {
background: #555;
color: #bbb;
cursor: default;
border-color: transparent;
}
#btn-save:not(:disabled) {
background: #282;
}
#main {
display: flex;
flex-direction: row;
height: calc(100vh - 37px);
}
.pane {
position: relative;
width: 50%;
height: 100%;
flex-shrink: 1;
}
.horizontal-resizer {
width: 8px;
flex: 0 0 auto;
background: #444;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
cursor: ew-resize;
touch-action: none;
}
.horizontal-resizer:hover {
transform: scaleX(1.25);
}
#pane-input > .cm-editor {
width: 100%;
height: 100%;
}
#preview {
width: 100%;
height: 100%;
overflow: auto;
}
#preview.invalid {
opacity: 0.5;
}
svg {
font-family: sans-serif;
}
#preview-compile-error {
display: none;
position: absolute;
top: 40px;
left: 40px;
padding: 4px 12px;
background: #f9a;
font-size: 14px;
color: #000;
font-weight: bold;
border-radius: 2px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 40%);
}
#preview-compile-error.show {
display: block;
}
#toasts {
position: absolute;
top: 10%;
right: 3%;
text-align: right;
}
.toast {
display: block;
margin: 16px;
padding: 12px 24px;
width: auto;
max-width: 400px;
overflow: hidden;
text-align: left;
background: #ec8;
border-radius: 2px;
box-shadow: 0 2px 12px -6px #000;
animation: toast-swipe-in 0.4s linear 1;
}
.toast.good {
background: #6d8;
}
.toast.bad {
background: #f89;
}
@keyframes toast-swipe-in {
0% {
opacity: 0;
max-height: 0;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
transform: translateY(-16px);
}
100% {
opacity: 1;
max-height: 100px;
transform: translateY(0);
}
}