prong-editor/dist/style.css

Prong (PRojectional jsON Gui) is an editor framework for creating bespoke in-browser editors for JSON-based domain-specific languages (such as [Vega](https://vega.github.io/vega/), [Vega-Lite](https://vega.github.io/vega-lite/), [Tracery](https://tracery.

:root{--menu-background: #f5f5f5;--menu-accent: #009979}.prong-flex{display:flex}.prong-flex-down{display:flex;flex-direction:column}.cm-annotation-widget,.cm-projection-widget{display:inline-block;cursor:pointer;pointer-events:all}.cm-annotation-widget{border-bottom:1px dotted black}.\37c 2 .cm-tooltip{border:none;background-color:transparent!important}.cm-annotation-menu{background:var(--menu-background);border-left:15px solid var(--menu-accent);border-radius:5px;box-shadow:5px 5px 5px #0003;font-family:sans-serif;max-height:300px;overflow-y:auto;padding-left:5px;width:440px;z-index:1000}.cm-annotation-menu-control{position:absolute;border:none;left:0;background:none;cursor:pointer}.cm-annotation-menu-control--top{top:0;left:-4px;font-size:10px}.cm-annotation-menu-control--bottom{bottom:0}.cm-annotation-widget-popover--search-bar{width:100%}.cm-container-click-target{display:inline-block;font-family:monospace}.cm-container-click-target button{background:none;border:none;cursor:pointer;line-height:.8;margin-left:0;margin-right:5px;padding:0}.cm-bool-widget{display:inline-block}.cm-bool-checkbox-widget{margin:0 3px 0 0;position:relative;top:2px}.cm-color-widget{display:inline-block;white-space:normal;width:10px;height:10px;border:none;border-radius:100%}.cm-annotation-widget-element .react-colorful{width:420px;height:140px}.cm-number-slider{position:relative;margin:0 15px}.cm-number-slider input{position:relative}.cm-number-slider-label{position:absolute;font-size:8px;pointer-events:none}.cm-number-slider-magnitude-label{position:absolute;font-size:8px;bottom:-8px;pointer-events:none}.cm-slider-dropzone{position:absolute;background-color:#fff;border:dotted 1px gray;height:15px;width:10px;top:1px}.cm-dock{background:var(--menu-background);border-radius:5px}.cm-dock-label{align-items:center;display:flex;font-size:10px;justify-content:space-between}.cm-dock-subcontainer{display:flex;flex-direction:column}.cm-dock-label button{background:none;border:none;cursor:pointer;font-size:10px;text-decoration:underline}#cm-monocle{display:none}.cm-monocle-container{position:absolute;width:500px}#cm-monocle .cm-dock{padding:5px 20px;box-shadow:5px 5px 5px #0003;border-left:15px solid var(--menu-accent)}.cm-monocle-drag-target{position:absolute;left:-17px;top:-25px;border-radius:100%;background-color:var(--menu-accent);cursor:pointer;width:50px;height:50px}.cm-annotation-widget-popover-container{max-width:420px;outline:none}.cm-tooltip-autocomplete.cm-tooltip{max-width:400px}.cm-annotation-widget-popover-container-row{display:flex;width:100%;height:100%;margin-top:2px;border-bottom:thin dotted black;font-size:13px;flex-direction:column}.cm-annotation-widget-popover-container-row:last-child{border-color:var(--menu-background)}.cm-annotation-widget-popover-container-row-label{cursor:pointer;display:flex;font-weight:700;font-size:10px;width:100%;border-left:solid 5px var(--menu-background)}.cm-annotation-widget-popover-container-row-pagination{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;font-size:10px}.cm-annotation-widget-popover-container-row-pagination button{font-size:10px;background:none;text-decoration:underline;cursor:pointer;border:none}.cm-annotation-widget-popover-container-row-content{display:flex;flex-wrap:wrap;max-width:100%;width:100%;max-height:200px;overflow-y:auto}.cm-annotation-widget-element,.cm-annotation-widget-popover-container-row{border-left:solid 5px var(--menu-background)}.cm-annotation-widget-popover-container-row.cm-annotation-widget-element-selected{border-left:solid 5px lightcoral}.cm-annotation-widget-element.cm-annotation-widget-element-selected{border:2px solid lightcoral}.cm-annotation-widget-element--color-chip{height:10px;width:10px;border-radius:100%;display:inline-block}.cm-annotation-render-widget-display p{margin:0}.cm-line{line-height:20px}.cm-annotation-highlighter{cursor:pointer;border:thin dotted gray}.cm-annotation-highlighter-selected{border:thin solid gray}.cm-annotation-highlighter-1{text-underline-offset:2px;text-decoration-color:#639}.cm-annotation-highlighter-2,.cm-annotation-highlighter-3,.cm-annotation-highlighter-4{text-decoration:none;border:none}.cm-annotation-widget-element button{border:none;border-radius:12px;cursor:pointer;font-size:13px;background:#009979;color:#fff;padding:3px 14px;margin-bottom:1px}.cm-line{border-left:3px solid white;transition:border-color .2s}.cm-gutterElement.cm-activeLineGutter,.cm-activeLine.cm-line,.cm-line:has(.cm-annotation-highlighter-selected){background-color:#6633991a}.cm-line:has(.cm-annotation-highlighter-selected){border-left:3px solid rebeccapurple}.cm-linter-highlight{background-color:#f08080}.cm-tooltip-autocomplete{right:0!important}.color-name-picker ul{list-style-type:none;padding:0;margin:0}.color-name-picker .color-group{display:inline-block;width:75px;font-weight:700;margin-bottom:.1rem;margin-top:.2rem}.color-name-picker .color-item,.color-name-picker .color-group{cursor:pointer;-webkit-user-select:none;user-select:none}.color-name-picker .color-group-container{display:flex;align-items:center;justify-content:center}.color-name-picker .color-group-options{width:100%}.color-name-picker .color-item{font-family:monospace;margin-bottom:0;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}.color-name-picker .color-item:first-of-type{margin-top:2px}.color-name-picker .color-item:last-of-type{margin-bottom:10px}.color-name-picker .selected{font-weight:700}.color-name-picker .color-swatch{display:inline-block;width:15px;height:15px;margin-right:1px;border-style:solid;border-width:2px;border-radius:3px;cursor:pointer}.color-name-picker .buttons{display:flex;margin-top:1rem}.color-name-picker .buttons button:first-child{margin-right:.5rem}.cm-color-picker-label{margin-right:2px}.cm-color-picker-preview{border-radius:100%;width:20px;height:20px}