openclaw
Version:
Multi-channel AI gateway with extensible messaging integrations
2 lines (1 loc) • 8.74 kB
CSS
.approval-page__backdrop{z-index:0;pointer-events:none;background:linear-gradient(90deg, transparent 0 49.8%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 50.2%), radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%), repeating-linear-gradient(90deg, transparent 0, transparent 79px, color-mix(in srgb, var(--text) 4%, transparent) 80px);position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 92%);mask-image:linear-gradient(#000,#0000 92%)}.approval-page__card{--approval-page-accent:var(--border);z-index:1;border:1px solid color-mix(in srgb, var(--approval-page-accent) 45%, var(--border));border-left:3px solid var(--approval-page-accent);background:color-mix(in srgb, var(--approval-page-accent) 5%, var(--card));width:100%;box-shadow:var(--shadow-xl);border-radius:4px 18px 18px 4px;position:relative;overflow:hidden}.approval-page__card--severity-info{--approval-page-accent:var(--border)}.approval-page__card--severity-warning{--approval-page-accent:var(--warn)}.approval-page__card--severity-danger{--approval-page-accent:var(--danger)}.approval-page__card:after{border-top:1px solid color-mix(in srgb, var(--approval-page-accent) 55%, transparent);border-right:1px solid color-mix(in srgb, var(--approval-page-accent) 55%, transparent);content:"";pointer-events:none;border-radius:0 17px 0 0;width:72px;height:72px;position:absolute;top:0;right:0}.approval-page__brand{border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--bg-elevated) 66%, transparent);align-items:center;gap:12px;min-height:76px;padding:16px 24px;display:flex}.approval-page__logo{width:36px;height:36px}.approval-page__eyebrow{color:var(--accent);font-family:var(--mono);font-size:var(--control-ui-text-xs);letter-spacing:.11em;text-transform:uppercase;font-weight:700}.approval-page__brand-name{color:var(--text-strong);font-size:var(--control-ui-text-sm);letter-spacing:.02em;margin-top:2px;font-weight:700}.approval-page__content{padding:28px 30px 30px}.approval-page__status{border:1px solid var(--border-strong);border-radius:var(--radius-full);min-height:28px;color:var(--muted-strong);font-family:var(--mono);font-size:var(--control-ui-text-xs);align-items:center;gap:8px;padding:4px 10px;font-weight:600;display:inline-flex}.approval-page__status-dot{background:var(--muted);border-radius:50%;width:7px;height:7px}.approval-page__status-dot--pending{background:var(--warn);box-shadow:0 0 0 4px var(--warn-subtle)}.approval-page__status-dot--allowed{background:var(--ok);box-shadow:0 0 0 4px var(--ok-subtle)}.approval-page__status-dot--denied,.approval-page__status-dot--expired,.approval-page__status-dot--cancelled{background:var(--danger);box-shadow:0 0 0 4px var(--danger-subtle)}.approval-page__heading{margin:22px 0 24px}.approval-page__heading h1,.approval-page__state h1{color:var(--text-strong);font-family:var(--font-display);letter-spacing:-.025em;margin:0;font-size:clamp(24px,5vw,34px);font-weight:720;line-height:1.12}.approval-page__heading p,.approval-page__state p{max-width:58ch;color:var(--muted-strong);font-size:var(--control-ui-text-md);margin:10px 0 0;line-height:1.55}.approval-page__chips{flex-wrap:wrap;gap:5px;margin-top:8px;display:flex}.approval-page__chips:not(:has(.approval-page__chip)){display:none}.approval-page__chip{border:1px solid var(--border);border-radius:var(--radius-full);color:var(--muted);font-size:var(--control-ui-text-xs);padding:2px 8px;font-weight:500}.approval-page__preview-label{color:var(--muted);font-family:var(--mono);font-size:var(--control-ui-text-xs);letter-spacing:.08em;text-transform:uppercase;margin:20px 0 8px;font-weight:700}.approval-page__summary,.approval-page__preview{overflow-wrap:anywhere;border:1px solid var(--border-strong);background:var(--bg);color:var(--text-strong);unicode-bidi:plaintext}.approval-page__summary{border-radius:var(--radius-sm);font-size:var(--control-ui-text-sm);padding:11px 13px}.approval-page__preview{border-radius:var(--radius-md);max-height:min(38vh,330px);font-size:var(--control-ui-text-md);tab-size:2;white-space:pre-wrap;margin:0;padding:17px 18px;line-height:1.55;overflow:auto}.approval-page__preview--prose{font-family:var(--font-body)}.approval-page__warning{border:1px solid color-mix(in srgb, var(--warn) 36%, var(--border));border-radius:var(--radius-sm);background:var(--warn-subtle);color:var(--text);font-size:var(--control-ui-text-sm);white-space:pre-wrap;padding:12px 14px;line-height:1.5}.approval-page__meta{border-radius:var(--radius-sm);background:var(--border);grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:14px 0 0;padding:1px;display:grid;overflow:hidden}.approval-page__meta:empty{display:none}.approval-page__meta-row{background:var(--card);min-width:0;padding:10px 12px}.approval-page__meta-row dt{color:var(--muted);font-size:var(--control-ui-text-xs);margin-bottom:3px}.approval-page__meta-row dd{overflow-wrap:anywhere;color:var(--text);font-family:var(--mono);font-size:var(--control-ui-text-sm);-webkit-user-select:text;user-select:text;unicode-bidi:plaintext;margin:0}.approval-page__timing{color:var(--muted);font-size:var(--control-ui-text-xs);justify-content:space-between;gap:16px;margin-top:18px;display:flex}.approval-page__timing time{color:var(--text);font-family:var(--mono)}.approval-page__actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px;display:grid}.approval-page__action{justify-content:center;min-height:48px;font-weight:700}.approval-page__action--allow-once{border-color:var(--accent);background:var(--primary);color:var(--primary-foreground)}@media (hover:hover){.approval-page__action--allow-once:hover:not(:disabled){border-color:var(--accent-hover);background:var(--accent-hover)}:root[data-theme=dark] .approval-page__action--allow-once:hover:not(:disabled),:root[data-theme=openknot] .approval-page__action--allow-once:hover:not(:disabled){background:var(--primary-hover)}}.approval-page__action--deny{border-color:color-mix(in srgb, var(--danger) 52%, var(--border));color:var(--danger)}.approval-page__actions .approval-page__action:only-child,.approval-page__action--deny:last-child:nth-child(odd){grid-column:1/-1}.approval-page__callout{border:1px solid color-mix(in srgb, var(--danger) 36%, var(--border));border-radius:var(--radius-sm);background:var(--danger-subtle);justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding:12px 14px;display:flex}.approval-page__callout strong,.approval-page__callout span{display:block}.approval-page__callout span{color:var(--muted-strong);font-size:var(--control-ui-text-xs);margin-top:3px}.approval-page__terminal{border-top:1px solid var(--border);color:var(--muted-strong);font-size:var(--control-ui-text-sm);text-align:center;margin-top:24px;padding-top:18px}.approval-page__state{text-align:center;align-content:center;place-items:center;min-height:330px;display:grid}.approval-page__state p{margin-inline:auto}.approval-page__state .btn{justify-content:center;min-width:120px;min-height:44px;margin-top:22px}.approval-page__spinner{border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;margin-bottom:20px;animation:.8s linear infinite approval-page-spin}.approval-page__state-mark{border:1px solid color-mix(in srgb, var(--danger) 50%, var(--border));width:40px;height:40px;color:var(--danger);font-family:var(--mono);border-radius:50%;place-items:center;margin-bottom:20px;font-weight:800;display:grid}.approval-page__back-link{z-index:1;min-height:44px;color:var(--muted-strong);font-size:var(--control-ui-text-sm);padding:12px 16px;text-decoration:none;position:relative}@media (hover:hover){.approval-page__back-link:hover{color:var(--text-strong)}}@keyframes approval-page-spin{to{transform:rotate(360deg)}}@media (width<=640px){.approval-page{padding:max(14px, var(--safe-area-top)) max(12px, var(--safe-area-right)) max(18px, var(--safe-area-bottom)) max(12px, var(--safe-area-left));align-content:start;place-items:start center}.approval-page__card{border-radius:3px 14px 14px 3px}.approval-page__brand{min-height:68px;padding:13px 17px}.approval-page__content{padding:23px 17px 20px}.approval-page__heading{margin-block:18px 21px}.approval-page__preview{max-height:34vh;padding:14px}.approval-page__meta,.approval-page__actions{grid-template-columns:1fr}.approval-page__action--deny:last-child:nth-child(odd){grid-column:auto}.approval-page__timing,.approval-page__callout{flex-direction:column;align-items:stretch}.approval-page__timing{gap:4px}.approval-page__callout .btn{justify-content:center;min-height:44px}}@media (prefers-reduced-motion:reduce){.approval-page__spinner{animation:none}}