83 lines
5.7 KiB
CSS
83 lines
5.7 KiB
CSS
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
|
|
#app { display: flex; height: 100%; }
|
|
#left-pane { flex: 0 0 33.333%; display: flex; flex-direction: column; min-width: 0; }
|
|
#right-pane { flex: 1 1 66.667%; display: flex; flex-direction: column; min-width: 0; overflow: auto; }
|
|
.pane-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
|
|
.pane-header h2 { margin: 0; font-size: 16px; }
|
|
#render-btn { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; }
|
|
#render-btn:hover { background: #f3f4f6; }
|
|
#yaml-input { flex: 1; width: 100%; }
|
|
.CodeMirror { height: 100%; font-size: 13px; }
|
|
#error { color: #b91c1c; padding: 6px 12px; min-height: 22px; }
|
|
#graph { flex: 1; position: relative; overflow: auto; }
|
|
svg { width: 100%; display: block; background: #ffffff; }
|
|
.node circle { fill: #3b82f6; stroke: #1e40af; stroke-width: 1px; }
|
|
.node text { font-size: 12px; fill: #111827; pointer-events: none; }
|
|
.link { stroke: #9ca3af; stroke-opacity: 0.8; }
|
|
.link.highlighted { stroke: #3b82f6; stroke-opacity: 1; stroke-width: 2.5; }
|
|
|
|
/* Tabs */
|
|
.tabs { display: flex; gap: 6px; align-items: center; padding: 8px 8px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
|
|
.tabs .spacer { flex: 1; }
|
|
.tab { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; }
|
|
.tab.active { background: #e5f0ff; border-color: #93c5fd; }
|
|
.tab.disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.tab-panels { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
|
.tab-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
|
.hidden { display: none; }
|
|
.form-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
.form-header select {
|
|
padding: 6px 8px;
|
|
padding-right: 36px; /* space for custom chevron */
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
background-color: white;
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center; /* pushes chevron from right edge */
|
|
background-size: 12px;
|
|
}
|
|
.form-header select::-ms-expand { display: none; }
|
|
.form-header select:hover { background-color: #f9fafb; }
|
|
|
|
/* Custom headers area */
|
|
.headers-bar { padding: 8px 12px; border-bottom: 1px solid #e5e7eb; background: #fff; }
|
|
.headers-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
|
.headers-controls span { font-size: 13px; color: #374151; }
|
|
#add-header-btn { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; }
|
|
#add-header-btn:hover { background: #f3f4f6; }
|
|
#headers-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.header-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
|
|
.header-row input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
|
|
.header-row button { padding: 6px 8px; border: 1px solid #d1d5db; background: white; border-radius: 6px; cursor: pointer; }
|
|
.header-row button:hover { background: #f3f4f6; }
|
|
|
|
#operations { overflow: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
/* Operation (collapsible) */
|
|
.operation { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; /* allow content to define height */ }
|
|
.operation .op-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; user-select: none; border-bottom: 1px solid #eef2f7; }
|
|
.operation .op-header .op-info { width: 100%; margin-left: 56px; /* align under method+path */ color: #6b7280; font-size: 12px; margin-top: 2px; }
|
|
.operation .op-header .method { font-weight: 600; font-size: 12px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
|
|
.operation .op-header .path { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #111827; }
|
|
.operation .op-header .summary { color: #6b7280; font-size: 12px; }
|
|
.operation .op-header .chev { margin-left: auto; color: #6b7280; align-self: flex-start; order: 2; }
|
|
.operation .op-header .method { order: 1; }
|
|
.operation .op-header .path { order: 1; }
|
|
.operation .op-header .op-info { order: 3; }
|
|
.operation .op-content { padding: 8px 10px; width: 100%; box-sizing: border-box; }
|
|
.operation .row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
|
|
.operation label { font-size: 12px; color: #374151; }
|
|
.operation input, .operation select, .operation textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-family: inherit; font-size: 13px; }
|
|
.operation .inline { display: flex; flex-direction: column; width: 100%; min-width: 0; }
|
|
.operation label { display: block; }
|
|
.operation button[type="submit"] { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: white; cursor: pointer; font-family: inherit; font-size: 13px; margin-top: 8px; }
|
|
.operation button[type="submit"]:hover { background: #f3f4f6; }
|
|
.operation pre { background: #0b1021; color: #e5e7eb; padding: 8px; border-radius: 6px; overflow: auto; max-height: 200px; }
|