| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| --fg: #333; |
| --bg: #eee; |
| --element: #ddd; |
| --element-hover: #f5f5f5; |
| --intense: #fff; |
| --intense-hover: #e3e3e3; |
| --border: #666; |
| |
| font: 16px Helvetica, sans-serif; |
| color: var(--fg); |
| background: var(--bg); |
| } |
| |
| body.dark { |
| --fg: #eee; |
| --bg: #333; |
| --element: #111; |
| --element-hover: #444; |
| --intense: #111; |
| --intense-hover: #444; |
| --border: #aaa; |
| } |
| |
| h1 { |
| font-size: 40px; |
| font-weight: bold; |
| margin: 20px 0; |
| } |
| |
| h2 { |
| font-size: 25px; |
| font-weight: bold; |
| margin: 30px 0; |
| } |
| |
| p { |
| margin: 0 0 1em 0; |
| line-height: 1.5; |
| } |
| |
| ul, ol { |
| margin: 0; |
| padding: 0 0 0 25px; |
| list-style-position: outside; |
| } |
| |
| li { |
| margin: 0 0 1em 0; |
| padding: 0; |
| line-height: 1.5; |
| } |
| |
| kbd { |
| display: inline-block; |
| margin: 0 1px; |
| padding: 2px 3px; |
| border: 1px solid var(--border); |
| border-radius: 3px; |
| background: var(--intense); |
| font: 11px "Menlo", "Consolas", monospace; |
| white-space: nowrap; |
| } |
| |
| .kbd-group { |
| white-space: nowrap; |
| } |
| |
| button { |
| font: inherit; |
| color: inherit; |
| outline: none; |
| border: none; |
| margin: 0; |
| } |
| |
| button:focus { |
| text-decoration: underline; |
| } |
| |
| .heading-fidl { |
| margin-left: 10px; |
| } |
| |
| .heading-bolt { |
| color: var(--intense); |
| -webkit-text-stroke-width: 1.5px; |
| -webkit-text-stroke-color: var(--fg); |
| margin-right: 5px; |
| } |
| |
| .wrapper { |
| margin: 0 20px; |
| display: flex; |
| flex-flow: column; |
| min-height: 100vh; |
| } |
| |
| .heading { |
| margin-top: 5px; |
| text-align: center; |
| } |
| |
| .container { |
| border: 1px solid var(--border); |
| border-radius: 5px; |
| overflow: hidden; |
| flex-grow: 1; |
| margin-bottom: 20px; |
| position: relative; |
| } |
| |
| .split-container { |
| position: absolute; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| right: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| } |
| |
| .split-container--horizontal { |
| flex-direction: column; |
| } |
| |
| .split-container--vertical { |
| flex-direction: row; |
| } |
| |
| .split-item { |
| display: flex; |
| min-width: 0; |
| flex-direction: column; |
| height: 100%; |
| } |
| |
| .split-item--first { |
| flex-shrink: 0; |
| } |
| |
| .split-item--second { |
| flex-grow: 1; |
| } |
| |
| .split-splitter { |
| flex-shrink: 0; |
| background: var(--border); |
| } |
| |
| .split-splitter--vertical { |
| cursor: ew-resize; |
| } |
| |
| .split-splitter--horizontal { |
| cursor: ns-resize; |
| } |
| |
| .navbar { |
| display: flex; |
| min-width: 0; |
| } |
| |
| .navbar-item { |
| text-align: center; |
| flex-grow: 1; |
| min-width: 0; |
| padding: 5px; |
| overflow: hidden; |
| white-space: nowrap; |
| user-select: none; |
| -webkit-user-select: none; |
| outline: none; |
| border: none; |
| /* Override the Ace theme foreground color */ |
| color: inherit; |
| } |
| |
| .navbar-item:focus { |
| text-decoration: none; |
| } |
| |
| .navbar-item--active { |
| font-weight: bold; |
| } |
| |
| .navbar-item:not(:first-child) { |
| border-left: 1px solid var(--border); |
| } |
| |
| .navbar-item:not(.navbar-item--active) { |
| cursor: pointer; |
| border-bottom: 1px solid var(--border); |
| background: var(--element); |
| } |
| |
| .navbar-item:not(.navbar-item--active):hover { |
| background: var(--element-hover); |
| } |
| |
| .editor-wrapper { |
| display: contents; |
| } |
| |
| .editor { |
| font: 14px "Menlo", "Consolas", monospace; |
| flex-grow: 1; |
| } |
| |
| .controls-container { |
| position: absolute; |
| top: 30px; |
| right: 20px; |
| } |
| |
| .controls-button { |
| background: var(--intense); |
| padding: 10px; |
| border: 1px solid var(--border); |
| border-radius: 5px; |
| cursor: pointer; |
| display: inline-block; |
| margin-left: 10px; |
| user-select: none; |
| -webkit-user-select: none; |
| } |
| |
| .controls-button:hover { |
| background: var(--intense-hover); |
| } |
| |
| .modal-container { |
| position: absolute; |
| background: rgba(255, 255, 255, 0.5); |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| z-index: 999; |
| } |
| |
| .modal-box { |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| right: 0; |
| max-width: min(100% - 100px, 525px); |
| padding: 0 20px 20px; |
| background: var(--bg); |
| border-left: 1px solid var(--border); |
| overflow-y: auto; |
| } |
| |
| .modal-box .form-control { |
| margin-bottom: 12px; |
| } |
| |
| .form-select { |
| margin-left: 8px; |
| width: 120px; |
| } |
| |
| .form-checkbox { |
| margin-right: 8px; |
| } |
| |
| .form-text, .form-number { |
| margin-left: 8px; |
| width: 40px; |
| } |
| |
| .form-number--invalid { |
| color: #f33; |
| } |
| |
| .form-button-group { |
| margin-top: 30px; |
| } |
| |
| .form-button { |
| background: var(--intense); |
| padding: 8px; |
| margin: 0 5px; |
| border: 1px solid var(--border); |
| border-radius: 5px; |
| cursor: pointer; |
| display: inline-block; |
| font: inherit; |
| color: inherit; |
| font-size: 14px; |
| } |
| |
| .form-button:hover { |
| background: var(--intense-hover); |
| } |
| |
| .output-options { |
| border-top: 1px solid var(--border); |
| background: var(--element); |
| min-height: 36px; |
| } |
| |
| .output-options .form-control { |
| display: inline-block; |
| padding: 10px 15px; |
| } |
| |
| .loader { |
| position: absolute; |
| top: 10px; |
| left: 20px; |
| z-index: 999; |
| opacity: 0; |
| transition: opacity .25s ease-in-out; |
| } |
| |
| @media (max-width: 750px) { |
| .heading { |
| text-align: left; |
| } |
| |
| .status { |
| left: 0; |
| right: 0; |
| text-align: center; |
| } |
| } |
| |
| /* https://loading.io/css/ */ |
| .lds-ellipsis { |
| display: inline-block; |
| position: relative; |
| width: 80px; |
| height: 80px; |
| } |
| .lds-ellipsis div { |
| position: absolute; |
| top: 33px; |
| width: 13px; |
| height: 13px; |
| border-radius: 50%; |
| background: var(--border); |
| animation-timing-function: cubic-bezier(0, 1, 1, 0); |
| } |
| .lds-ellipsis div:nth-child(1) { |
| left: 8px; |
| animation: lds-ellipsis1 0.6s infinite; |
| } |
| .lds-ellipsis div:nth-child(2) { |
| left: 8px; |
| animation: lds-ellipsis2 0.6s infinite; |
| } |
| .lds-ellipsis div:nth-child(3) { |
| left: 32px; |
| animation: lds-ellipsis2 0.6s infinite; |
| } |
| .lds-ellipsis div:nth-child(4) { |
| left: 56px; |
| animation: lds-ellipsis3 0.6s infinite; |
| } |
| @keyframes lds-ellipsis1 { |
| 0% { |
| transform: scale(0); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| @keyframes lds-ellipsis3 { |
| 0% { |
| transform: scale(1); |
| } |
| 100% { |
| transform: scale(0); |
| } |
| } |
| @keyframes lds-ellipsis2 { |
| 0% { |
| transform: translate(0, 0); |
| } |
| 100% { |
| transform: translate(24px, 0); |
| } |
| } |