| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| /* Copied from fidlbolt */ |
| --fg: #333; |
| --bg: #f0f0f0; |
| --border: #666; |
| --element: #ddd; |
| --element-hover: #f5f5f5; |
| --intense: #fff; |
| --intense-hover: #e3e3e3; |
| --border: #666; |
| --link: #06d; |
| |
| /* Not in fidlbolt */ |
| --cover: rgba(255, 255, 255, 0.75); |
| --underline: rgba(0, 0, 0, 0.25); |
| --underline-active: rgba(0, 0, 0, 0.75); |
| --shadow: rgba(0, 0, 0, 0.3); |
| --tooltip-gradient: rgba(0, 0, 0, 0.1); |
| --input-error: #ffaaaa; |
| --highlight-1: #ffeea2; |
| --highlight-2: #cfff90; |
| --highlight-3: #a6ffec; |
| --highlight-4: #a4dbff; |
| --highlight-5: #adbcff; |
| --highlight-6: #dbb8fc; |
| --highlight-7: #ffb9f6; |
| --highlight-8: #ffb9b9; |
| --highlight-9: #ffd8a6; |
| |
| font: 16px Helvetica, sans-serif; |
| color: var(--fg); |
| background: var(--bg); |
| |
| /* Prevent tooltips near edges from making the document have scrollbars, |
| causing jankiness when mousing onto and off that element. */ |
| overflow: hidden; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| body { |
| /* Copied from fidlbolt */ |
| --fg: #eee; |
| --bg: #333; |
| --element: #111; |
| --element-hover: #444; |
| --intense: #111; |
| --intense-hover: #444; |
| --border: #aaa; |
| --link: #6af; |
| |
| /* Not in fidlbolt */ |
| --cover: rgba(30, 30, 30, 0.75); |
| --underline: rgba(255, 255, 255, 0.8); |
| --underline-active: rgba(255, 255, 255, 1); |
| --shadow: rgba(255, 255, 255, 0.5); |
| --tooltip-gradient: rgba(255, 255, 255, 0.2); |
| --input-error: #c75252; |
| --highlight-1: #ad8e00; |
| --highlight-2: #518f00; |
| --highlight-3: #009474; |
| --highlight-4: #286b97; |
| --highlight-5: #4356a8; |
| --highlight-6: #7239a8; |
| --highlight-7: #971c87; |
| --highlight-8: #992121; |
| --highlight-9: #bd6b00; |
| } |
| } |
| |
| .part-header { |
| display: flex; |
| justify-content: space-between; |
| background: var(--element); |
| border-bottom: 1px solid var(--border); |
| padding: 5px 10px 4px; |
| user-select: none; |
| } |
| |
| .part-header:hover { |
| /* Prevent weird flicker when dragging splitter by disabling selection, |
| and enabling only on hover. Not perfect (selection reappears when you |
| hove again) but better than before. */ |
| user-select: auto; |
| } |
| |
| .part-title { |
| font-size: 18px; |
| margin: 0; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .button--active { |
| font-weight: bold; |
| } |
| |
| .slider { |
| flex: 0 0 165px; |
| } |
| |
| .input-error { |
| background: var(--input-error); |
| position: absolute; |
| } |
| |
| .highlight-1 { |
| background: var(--highlight-1); |
| position: absolute; |
| } |
| |
| .highlight-2 { |
| background: var(--highlight-2); |
| position: absolute; |
| } |
| |
| .highlight-3 { |
| background: var(--highlight-3); |
| position: absolute; |
| } |
| |
| .highlight-4 { |
| background: var(--highlight-4); |
| position: absolute; |
| } |
| |
| .highlight-5 { |
| background: var(--highlight-5); |
| position: absolute; |
| } |
| |
| .highlight-6 { |
| background: var(--highlight-6); |
| position: absolute; |
| } |
| |
| .highlight-7 { |
| background: var(--highlight-7); |
| position: absolute; |
| } |
| |
| .highlight-8 { |
| background: var(--highlight-8); |
| position: absolute; |
| } |
| |
| .highlight-9 { |
| background: var(--highlight-9); |
| position: absolute; |
| } |
| |
| .has-tooltip, .has-tooltip-active { |
| border-bottom: 3px solid var(--underline); |
| border-radius: 0; |
| box-sizing: border-box; |
| position: absolute; |
| } |
| |
| .has-tooltip-active { |
| border-bottom-color: var(--underline-active); |
| } |
| |
| /* |
| https://github.com/devuxd/SeeCodeRun/wiki/Ace-code-editor#i-want-to-create-a-popup-that-comes-up-whenever-the-user-hovers-over-a-piece-of-code-whats-the-best-way-to-do-that |
| */ |
| .tooltip { |
| background-color: var(--bg); |
| background-image: -webkit-linear-gradient(top, transparent, var(--tooltip-gradient)); |
| background-image: linear-gradient(to bottom, transparent, var(--tooltip-gradient)); |
| border: 1px solid var(--border); |
| border-radius: 1px; |
| box-shadow: 0 1px 2px var(--shadow); |
| color: var(--fg); |
| max-width: 100%; |
| padding: 3px 4px; |
| position: absolute; |
| z-index: 999999; |
| -moz-box-sizing: border-box; |
| -webkit-box-sizing: border-box; |
| box-sizing: border-box; |
| cursor: default; |
| white-space: pre; |
| word-wrap: break-word; |
| line-height: normal; |
| font-style: normal; |
| font-weight: normal; |
| letter-spacing: normal; |
| pointer-events: none; |
| } |
| |
| /* ========================================================================== */ |
| /* ===== START copied from fidlbolt ========================================= */ |
| /* ========================================================================== */ |
| h1 { |
| font-size: 40px; |
| font-weight: bold; |
| margin: 20px 0; |
| } |
| h2 { |
| font-size: 25px; |
| font-weight: bold; |
| margin: 30px 0; |
| } |
| a { |
| text-decoration: none; |
| color: var(--link); |
| } |
| a:hover { |
| text-decoration: underline; |
| } |
| 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; |
| } |
| .close-list li { |
| margin: 0; |
| } |
| 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; |
| } |
| hr { |
| border: none; |
| border-bottom: 1px solid var(--border); |
| margin: 30px auto; |
| padding: 0; |
| } |
| button { |
| font: inherit; |
| color: inherit; |
| outline: none; |
| border: none; |
| margin: 0; |
| } |
| button:focus { |
| text-decoration: underline; |
| } |
| .heading-fidl { |
| margin-left: 10px; |
| } |
| /* CHANGED (from heading-bolt) */ |
| .heading-viz { |
| 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 { |
| 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; |
| width: 8px; |
| } |
| .split-splitter--horizontal { |
| cursor: ns-resize; |
| height: 8px; |
| } |
| .editor { |
| font: 14px "Menlo", "Consolas", monospace; |
| /* ADDED */ line-height: 18px; |
| flex-grow: 1; |
| } |
| .controls-container { |
| position: absolute; |
| top: 23px; |
| 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; |
| /* CHANGED */ |
| /* background: rgba(255, 255, 255, 0.5); */ |
| background: var(--cover); |
| 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); |
| } |
| /* CHANGED from 750px (because more buttons) */ |
| @media (max-width: 850px) { |
| .heading { |
| text-align: left; |
| } |
| .status { |
| left: 0; |
| right: 0; |
| text-align: center; |
| } |
| } |
| /* ========================================================================== */ |
| /* ===== END copied from fidlbolt =======================--================== */ |
| /* ========================================================================== */ |