Yashas
a42216aa12
Ops and Trader portal for the Adani bunker enquiry demo (dev org 900000130 / app 900000230), standing in for the Adobe enquiry portal. Spectrum-style layout, Source Sans 3, light and dark tokens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
96 lines
3.4 KiB
CSS
96 lines
3.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Spectrum-style tokens. Every colour in a component is one of these; dark mode
|
|
redefines them. Blue = action; green / orange / red = status; violet = what
|
|
the AI read (never used for anything a person decided). */
|
|
:root {
|
|
--bg: #f5f5f5;
|
|
--surface: #ffffff;
|
|
--surface-2: #fafafa;
|
|
--border: #e1e1e1;
|
|
--border-strong: #cacaca;
|
|
--text: #2c2c2c;
|
|
--muted: #6e6e6e;
|
|
--accent: #1473e6;
|
|
--accent-hover: #0d66d0;
|
|
--accent-soft: #e5f0fd;
|
|
--positive: #268e6c;
|
|
--positive-soft: #e3f5ee;
|
|
--notice: #cb6f10;
|
|
--notice-soft: #fdf0e2;
|
|
--negative: #d7373f;
|
|
--negative-soft: #fbe8e9;
|
|
--ai: #7e4ccb;
|
|
--ai-soft: #f1eafb;
|
|
--bubble-in: #ffffff;
|
|
--bubble-out: #e5f0fd;
|
|
--topbar: #ffffff;
|
|
--shadow: 0 1px 3px rgb(0 0 0 / 0.08);
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--bg: #1d1d1d;
|
|
--surface: #2c2c2c;
|
|
--surface-2: #323232;
|
|
--border: #3e3e3e;
|
|
--border-strong: #555555;
|
|
--text: #e8e8e8;
|
|
--muted: #a3a3a3;
|
|
--accent: #4b9cf5;
|
|
--accent-hover: #6aaef7;
|
|
--accent-soft: #1d3554;
|
|
--positive: #3db58f;
|
|
--positive-soft: #1b3a30;
|
|
--notice: #f29423;
|
|
--notice-soft: #43301a;
|
|
--negative: #f0565d;
|
|
--negative-soft: #4a2427;
|
|
--ai: #a77ef0;
|
|
--ai-soft: #352a4a;
|
|
--bubble-in: #383838;
|
|
--bubble-out: #1d3554;
|
|
--topbar: #252525;
|
|
--shadow: 0 1px 3px rgb(0 0 0 / 0.4);
|
|
}
|
|
|
|
@theme inline {
|
|
--color-bg: var(--bg);
|
|
--color-surface: var(--surface);
|
|
--color-surface-2: var(--surface-2);
|
|
--color-line: var(--border);
|
|
--color-line-strong: var(--border-strong);
|
|
--color-ink: var(--text);
|
|
--color-muted: var(--muted);
|
|
--color-accent: var(--accent);
|
|
--color-accent-hover: var(--accent-hover);
|
|
--color-accent-soft: var(--accent-soft);
|
|
--color-positive: var(--positive);
|
|
--color-positive-soft: var(--positive-soft);
|
|
--color-notice: var(--notice);
|
|
--color-notice-soft: var(--notice-soft);
|
|
--color-negative: var(--negative);
|
|
--color-negative-soft: var(--negative-soft);
|
|
--color-ai: var(--ai);
|
|
--color-ai-soft: var(--ai-soft);
|
|
--color-bubble-in: var(--bubble-in);
|
|
--color-bubble-out: var(--bubble-out);
|
|
--color-topbar: var(--topbar);
|
|
--font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
|
|
html, body { background: var(--bg); color: var(--text); }
|
|
body { font-family: var(--font-sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
|
|
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
|
|
.field-input {
|
|
width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
|
|
border-radius: 4px; padding: 6px 10px; font-size: 14px; outline: none;
|
|
}
|
|
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
|
|
.btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 16px; padding: 5px 16px; font-weight: 600; font-size: 14px; border: 2px solid transparent; cursor: pointer; transition: background .12s; }
|
|
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
|
.btn-cta { background: var(--accent); color: #fff; }
|
|
.btn-cta:hover:not(:disabled) { background: var(--accent-hover); }
|
|
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
|
|
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
|
|
.btn-negative { background: transparent; color: var(--negative); border-color: var(--negative); }
|
|
.btn-negative:hover:not(:disabled) { background: var(--negative-soft); }
|