customerio-gist-web/dist/types/managers/debug-overlay-styles.d.ts

Build beautiful in-app flows with no code and deliver them instantly to your app. http://customer.io

export declare const DEBUG_OVERLAY_CSS = "\n  #gist-debug-overlay {\n    position: fixed; bottom: 16px; right: 16px;\n    z-index: 99999999999;\n    background: #08272B; color: white;\n    font-family: system-ui, -apple-system, sans-serif;\n    font-size: 11px;\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n    width: 300px;\n    max-height: min(700px, calc(100vh - 32px));\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    overflow: hidden;\n  }\n  .gist-debug-header {\n    display: flex; align-items: center;\n    padding: 8px 12px;\n    border-bottom: 1px solid rgba(255,255,255,0.1);\n    flex-shrink: 0;\n  }\n  .gist-debug-title {\n    flex: 1;\n    font-weight: 700;\n    font-size: 12px;\n    letter-spacing: 0.02em;\n  }\n  #gist-debug-overlay-close {\n    background: none; border: none;\n    color: white; cursor: pointer;\n    padding: 0; font-size: 18px; line-height: 1;\n    opacity: 0.6; flex-shrink: 0;\n    font-family: system-ui, -apple-system, sans-serif;\n    -webkit-appearance: none; appearance: none;\n  }\n  #gist-debug-overlay-close:hover { opacity: 1; }\n  .gist-debug-section {\n    padding: 0 12px 8px;\n    border-bottom: 1px solid rgba(255,255,255,0.07);\n    overflow-y: auto;\n    max-height: 180px;\n  }\n  .gist-debug-section:last-child { border-bottom: none; }\n  .gist-debug-label {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background: #08272B;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: rgba(255,255,255,0.45);\n    padding: 8px 0 5px;\n    font-weight: 600;\n  }\n  .gist-debug-value {\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 11px;\n    color: rgba(255,255,255,0.9);\n    overflow-wrap: break-word;\n  }\n  .gist-debug-msg {\n    background: rgba(255,255,255,0.06);\n    border-radius: 4px;\n    padding: 5px 7px;\n    margin-bottom: 8px;\n  }\n  .gist-debug-msg:last-child { margin-bottom: 0; }\n  .gist-debug-msg-row {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-bottom: 2px;\n  }\n  .gist-debug-msg-row:last-child { margin-bottom: 0; }\n  .gist-debug-msg-meta {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    margin-bottom: 4px;\n  }\n  .gist-debug-msg-state {\n    font-size: 9px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-radius: 3px;\n    padding: 1px 4px;\n    flex-shrink: 0;\n  }\n  .gist-debug-msg-state--active {\n    color: #4caf82;\n    background: rgba(76,175,130,0.12);\n  }\n  .gist-debug-msg-state--queued {\n    color: rgba(255,200,100,0.9);\n    background: rgba(255,200,100,0.1);\n  }\n  .gist-debug-msg-dismiss {\n    margin-left: auto;\n    background: none;\n    border: none;\n    color: rgba(255,255,255,0.3);\n    cursor: pointer;\n    padding: 0;\n    font-size: 13px;\n    line-height: 1;\n    font-family: system-ui, -apple-system, sans-serif;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n  .gist-debug-msg-dismiss:hover { color: rgba(255,255,255,0.7); }\n  .gist-debug-element-found {\n    color: #4caf82;\n    font-size: 9px;\n    font-weight: 700;\n    flex-shrink: 0;\n  }\n  .gist-debug-route-mismatch {\n    color: #ff6b6b;\n    font-size: 9px;\n    font-weight: 700;\n    flex-shrink: 0;\n  }\n  .gist-debug-msg-type {\n    font-size: 9px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: rgba(255,255,255,0.45);\n    background: rgba(255,255,255,0.08);\n    border-radius: 3px;\n    padding: 1px 4px;\n    flex-shrink: 0;\n  }\n  .gist-debug-msg-key {\n    color: rgba(255,255,255,0.45);\n    font-size: 10px;\n    line-height: 1.4;\n    min-width: 64px;\n    flex-shrink: 0;\n  }\n  .gist-debug-msg-val {\n    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;\n    font-size: 10px;\n    line-height: 1.4;\n    color: rgba(255,255,255,0.9);\n    overflow-wrap: break-word;\n  }\n  .gist-debug-val-error {\n    color: #ff6b6b;\n    font-weight: 600;\n  }\n  .gist-debug-expand-detail {\n    background: rgba(255,107,107,0.08);\n    border-left: 2px solid rgba(255,107,107,0.4);\n    color: rgba(255,255,255,0.75);\n    font-family: system-ui, -apple-system, sans-serif;\n    font-size: 10px;\n    padding: 4px 6px;\n    margin-top: 4px;\n    margin-bottom: 6px;\n    border-radius: 0 3px 3px 0;\n  }\n  .gist-debug-expand-list {\n    margin: 0;\n    padding: 0 0 0 14px;\n    list-style: disc;\n  }\n  .gist-debug-expand-list li {\n    margin-bottom: 3px;\n    line-height: 1.4;\n  }\n  .gist-debug-expand-list li:last-child { margin-bottom: 0; }\n  .gist-debug-msg-details {\n    margin: 5px 0 0;\n    padding: 0 0 0 14px;\n    list-style: disc;\n    color: rgba(255,255,255,0.5);\n    font-size: 10px;\n    line-height: 1.4;\n    font-family: system-ui, -apple-system, sans-serif;\n  }\n  .gist-debug-msg-details li { margin-bottom: 2px; }\n  .gist-debug-msg-details li:last-child { margin-bottom: 0; }\n";