pi-web-ui 0.92.0 → 0.94.0

package/themes/everforest-light.css

@@ -0,0 +1,136 @@
+/* theme-name: 森野浅绿 */
+/* theme-name-en: Everforest Light */
+/* theme-group: classic */
+:root {
+	color-scheme: light;
+	--bg: #fdf6e3;
+	--bg-elev: #f4f0d9;
+	--bg-elev2: #efebd4;
+	--border: #e6e2cc;
+	--border-soft: #efebd4;
+	--text: #5c6a72;
+	--text-dim: #687361;
+	--text-faint: #6a7365;
+	--accent: #3a94c5;
+	--accent-soft: rgba(58, 148, 197, 0.14);
+	--green: #8da101;
+	--green-soft: rgba(141, 161, 1, 0.12);
+	--red: #f85552;
+	--red-soft: rgba(248, 85, 82, 0.1);
+	--amber: #dfa000;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
+	--term-bg: #fdf6e3;
+	--term-fg: #5c6a72;
+	--term-cursor: #3a94c5;
+	--term-cursor-accent: #fdf6e3;
+	--term-selection: rgba(58, 148, 197, 0.24);
+	--term-black: #5c6a72;
+	--term-red: #f85552;
+	--term-green: #8da101;
+	--term-yellow: #dfa000;
+	--term-blue: #3a94c5;
+	--term-magenta: #df69ba;
+	--term-cyan: #35a77c;
+	--term-white: #f4f0d9;
+	--term-bright-black: #7a8478;
+	--term-bright-red: #f85552;
+	--term-bright-green: #8da101;
+	--term-bright-yellow: #dfa000;
+	--term-bright-blue: #3a94c5;
+	--term-bright-magenta: #df69ba;
+	--term-bright-cyan: #35a77c;
+	--term-bright-white: #fdf6e3;
+	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+	--mermaid-font-size: 12px;
+	--tooltip-bg: #f4f0d9;
+	--code-bg: #f4f0d9;
+	--code-text: #5c6a72;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
+	--err-text: #c14c45;
+	--red-text: #c14c45;
+	--amber-text: #a97b00;
+	--info-blue: #3a94c5;
+	--link: #3a94c5;
+	--link-hover: #2e7aa6;
+	--link-soft: #3a94c5;
+	--md-strong: #4a5940;
+	--skill-blue: #3a94c5;
+	--plugin-purple: #b58cff;
+	--auth-green: #8da101;
+	--scroll-thumb: #d8d3bd;
+	--scroll-thumb-hover: #bdc3af;
+	--notice-err-bg: #401d23;
+	--notice-warn-bg: #38251f;
+	--notice-info-bg: #1b2544;
+	--notice-err-border: #ef4444;
+	--notice-warn-border: #f59e0b;
+	--notice-info-border: #3b82f6;
+	--send-blue: #3a94c5;
+	--send-blue-hover: #2e7aa6;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
+	--brand-grad-a: #8da101;
+	--brand-grad-b: #3a94c5;
+	--on-amber: #1a1a1a;
+	--search-active-fg: #1a1d26;
+	--switch-knob: #ffffff;
+	--bg-elev3: rgba(255, 255, 255, 0.06);
+	--sunken-bg: rgba(0, 0, 0, 0.15);
+	--glow-015: rgba(255, 255, 255, 0.015);
+	--glow-025: rgba(255, 255, 255, 0.025);
+	--glow-03: rgba(255, 255, 255, 0.03);
+	--glow-04: rgba(255, 255, 255, 0.04);
+	--glow-05: rgba(255, 255, 255, 0.05);
+	--glow-12: rgba(255, 255, 255, 0.12);
+	--glow-18: rgba(255, 255, 255, 0.18);
+	--glow-22: rgba(255, 255, 255, 0.22);
+	--glow-38: rgba(255, 255, 255, 0.38);
+	--control-fg: #7a8478;
+	--control-bg: #f4f0d9;
+	--control-border: #e6e2cc;
+	--bg-image: none;
+	--bg-image-dim: 0.78;
+	--bg-image-blur: 0px;
+	--wallpaper-panel-alpha: 100%;
+	--topbar-bg: #f4f0d9;
+	--statusbar-bg: #fdf6e3;
+	--panel-bg: #f4f0d9;
+	--card-bg: #f4f0d9;
+	--chip-bg: #efebd4;
+	--msgs-bg: #fdf6e3;
+	--inputbox-bg: #efebd4;
+	--menu-bg: var(--bg-elev2);
+}
+
+/* ---- syntax highlighting (Everforest Light) ---- */
+.hljs {
+	color: #5c6a72;
+	background: #f4f0d9;
+}
+.hljs-keyword,
+.hljs-meta .hljs-keyword {
+	color: #c14c45;
+	font-weight: 600;
+}
+.hljs-title,
+.hljs-title.function_ {
+	color: #3a94c5;
+}
+.hljs-number,
+.hljs-literal {
+	color: #df69ba;
+}
+.hljs-string {
+	color: #8da101;
+}
+.hljs-built_in,
+.hljs-type {
+	color: #a97b00;
+}
+.hljs-comment {
+	color: #6d7768;
+	font-style: italic;
+}

package/themes/geist.css

@@ -0,0 +1,136 @@
+/* theme-name: 极客雪白 */
+/* theme-name-en: Geist Light */
+/* theme-group: classic */
+:root {
+	color-scheme: light;
+	--bg: #ffffff;
+	--bg-elev: #fafafa;
+	--bg-elev2: #f4f4f5;
+	--border: #eaeaea;
+	--border-soft: #f2f2f2;
+	--text: #000000;
+	--text-dim: #666666;
+	--text-faint: #767676;
+	--accent: #0070f3;
+	--accent-soft: rgba(0, 112, 243, 0.12);
+	--green: #059669;
+	--green-soft: rgba(5, 150, 105, 0.12);
+	--red: #ee0000;
+	--red-soft: rgba(238, 0, 0, 0.1);
+	--amber: #f5a623;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
+	--term-bg: #fafafa;
+	--term-fg: #000000;
+	--term-cursor: #000000;
+	--term-cursor-accent: #ffffff;
+	--term-selection: rgba(0, 112, 243, 0.2);
+	--term-black: #000000;
+	--term-red: #ee0000;
+	--term-green: #059669;
+	--term-yellow: #f5a623;
+	--term-blue: #0070f3;
+	--term-magenta: #7928ca;
+	--term-cyan: #50e3c2;
+	--term-white: #fafafa;
+	--term-bright-black: #666666;
+	--term-bright-red: #ff0000;
+	--term-bright-green: #047857;
+	--term-bright-yellow: #f5a623;
+	--term-bright-blue: #0070f3;
+	--term-bright-magenta: #7928ca;
+	--term-bright-cyan: #50e3c2;
+	--term-bright-white: #ffffff;
+	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+	--mermaid-font-size: 12px;
+	--tooltip-bg: #ffffff;
+	--code-bg: #f7f7f8;
+	--code-text: #111111;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
+	--err-text: #ee0000;
+	--red-text: #ee0000;
+	--amber-text: #f5a623;
+	--info-blue: #0070f3;
+	--link: #0070f3;
+	--link-hover: #0051b3;
+	--link-soft: #0070f3;
+	--md-strong: #000000;
+	--skill-blue: #0070f3;
+	--plugin-purple: #b58cff;
+	--auth-green: #059669;
+	--scroll-thumb: #d4d4d4;
+	--scroll-thumb-hover: #a3a3a3;
+	--notice-err-bg: #401d23;
+	--notice-warn-bg: #38251f;
+	--notice-info-bg: #1b2544;
+	--notice-err-border: #ef4444;
+	--notice-warn-border: #f59e0b;
+	--notice-info-border: #3b82f6;
+	--send-blue: #000000;
+	--send-blue-hover: #333333;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
+	--brand-grad-a: #000000;
+	--brand-grad-b: #0070f3;
+	--on-amber: #1a1a1a;
+	--search-active-fg: #1a1d26;
+	--switch-knob: #ffffff;
+	--bg-elev3: rgba(255, 255, 255, 0.06);
+	--sunken-bg: rgba(0, 0, 0, 0.15);
+	--glow-015: rgba(255, 255, 255, 0.015);
+	--glow-025: rgba(255, 255, 255, 0.025);
+	--glow-03: rgba(255, 255, 255, 0.03);
+	--glow-04: rgba(255, 255, 255, 0.04);
+	--glow-05: rgba(255, 255, 255, 0.05);
+	--glow-12: rgba(255, 255, 255, 0.12);
+	--glow-18: rgba(255, 255, 255, 0.18);
+	--glow-22: rgba(255, 255, 255, 0.22);
+	--glow-38: rgba(255, 255, 255, 0.38);
+	--control-fg: #444444;
+	--control-bg: #fafafa;
+	--control-border: #eaeaea;
+	--bg-image: none;
+	--bg-image-dim: 0.78;
+	--bg-image-blur: 0px;
+	--wallpaper-panel-alpha: 100%;
+	--topbar-bg: #ffffff;
+	--statusbar-bg: #fafafa;
+	--panel-bg: #ffffff;
+	--card-bg: #ffffff;
+	--chip-bg: #f4f4f5;
+	--msgs-bg: #ffffff;
+	--inputbox-bg: #f4f4f5;
+	--menu-bg: var(--bg-elev2);
+}
+
+/* ---- syntax highlighting (Geist Light) ---- */
+.hljs {
+	color: #111111;
+	background: #f7f7f8;
+}
+.hljs-keyword,
+.hljs-meta .hljs-keyword {
+	color: #e00000;
+	font-weight: 600;
+}
+.hljs-title,
+.hljs-title.function_ {
+	color: #0070f3;
+}
+.hljs-number,
+.hljs-literal {
+	color: #7928ca;
+}
+.hljs-string {
+	color: #0284c7;
+}
+.hljs-built_in,
+.hljs-type {
+	color: #f5a623;
+}
+.hljs-comment {
+	color: #888888;
+	font-style: italic;
+}

package/themes/gruvbox-light.css

@@ -0,0 +1,136 @@
+/* theme-name: 格鲁夫沙 */
+/* theme-name-en: Gruvbox Light */
+/* theme-group: classic */
+:root {
+	color-scheme: light;
+	--bg: #fbf1c7;
+	--bg-elev: #ebdbb2;
+	--bg-elev2: #d5c4a1;
+	--border: #d5c4a1;
+	--border-soft: #ebdbb2;
+	--text: #3c3836;
+	--text-dim: #504945;
+	--text-faint: #665c54;
+	--accent: #af3a03;
+	--accent-soft: rgba(175, 58, 3, 0.14);
+	--green: #79740e;
+	--green-soft: rgba(121, 116, 14, 0.12);
+	--red: #9d0006;
+	--red-soft: rgba(157, 0, 6, 0.1);
+	--amber: #b57614;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
+	--term-bg: #fbf1c7;
+	--term-fg: #3c3836;
+	--term-cursor: #af3a03;
+	--term-cursor-accent: #fbf1c7;
+	--term-selection: rgba(175, 58, 3, 0.24);
+	--term-black: #3c3836;
+	--term-red: #9d0006;
+	--term-green: #79740e;
+	--term-yellow: #b57614;
+	--term-blue: #076678;
+	--term-magenta: #8f3f71;
+	--term-cyan: #427b58;
+	--term-white: #ebdbb2;
+	--term-bright-black: #665c54;
+	--term-bright-red: #9d0006;
+	--term-bright-green: #79740e;
+	--term-bright-yellow: #b57614;
+	--term-bright-blue: #076678;
+	--term-bright-magenta: #8f3f71;
+	--term-bright-cyan: #427b58;
+	--term-bright-white: #fbf1c7;
+	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+	--mermaid-font-size: 12px;
+	--tooltip-bg: #ebdbb2;
+	--code-bg: #ebdbb2;
+	--code-text: #3c3836;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
+	--err-text: #9d0006;
+	--red-text: #9d0006;
+	--amber-text: #b57614;
+	--info-blue: #076678;
+	--link: #076678;
+	--link-hover: #055a68;
+	--link-soft: #076678;
+	--md-strong: #282828;
+	--skill-blue: #076678;
+	--plugin-purple: #b58cff;
+	--auth-green: #79740e;
+	--scroll-thumb: #d5c4a1;
+	--scroll-thumb-hover: #bdae93;
+	--notice-err-bg: #401d23;
+	--notice-warn-bg: #38251f;
+	--notice-info-bg: #1b2544;
+	--notice-err-border: #ef4444;
+	--notice-warn-border: #f59e0b;
+	--notice-info-border: #3b82f6;
+	--send-blue: #9d0006;
+	--send-blue-hover: #af3a03;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
+	--brand-grad-a: #af3a03;
+	--brand-grad-b: #b57614;
+	--on-amber: #1a1a1a;
+	--search-active-fg: #1a1d26;
+	--switch-knob: #ffffff;
+	--bg-elev3: rgba(255, 255, 255, 0.06);
+	--sunken-bg: rgba(0, 0, 0, 0.15);
+	--glow-015: rgba(255, 255, 255, 0.015);
+	--glow-025: rgba(255, 255, 255, 0.025);
+	--glow-03: rgba(255, 255, 255, 0.03);
+	--glow-04: rgba(255, 255, 255, 0.04);
+	--glow-05: rgba(255, 255, 255, 0.05);
+	--glow-12: rgba(255, 255, 255, 0.12);
+	--glow-18: rgba(255, 255, 255, 0.18);
+	--glow-22: rgba(255, 255, 255, 0.22);
+	--glow-38: rgba(255, 255, 255, 0.38);
+	--control-fg: #504945;
+	--control-bg: #ebdbb2;
+	--control-border: #d5c4a1;
+	--bg-image: none;
+	--bg-image-dim: 0.78;
+	--bg-image-blur: 0px;
+	--wallpaper-panel-alpha: 100%;
+	--topbar-bg: #ebdbb2;
+	--statusbar-bg: #fbf1c7;
+	--panel-bg: #ebdbb2;
+	--card-bg: #ebdbb2;
+	--chip-bg: #d5c4a1;
+	--msgs-bg: #fbf1c7;
+	--inputbox-bg: #d5c4a1;
+	--menu-bg: var(--bg-elev2);
+}
+
+/* ---- syntax highlighting (Gruvbox Light) ---- */
+.hljs {
+	color: #3c3836;
+	background: #ebdbb2;
+}
+.hljs-keyword,
+.hljs-meta .hljs-keyword {
+	color: #9d0006;
+	font-weight: 600;
+}
+.hljs-title,
+.hljs-title.function_ {
+	color: #076678;
+}
+.hljs-number,
+.hljs-literal {
+	color: #8f3f71;
+}
+.hljs-string {
+	color: #79740e;
+}
+.hljs-built_in,
+.hljs-type {
+	color: #b57614;
+}
+.hljs-comment {
+	color: #7f7360;
+	font-style: italic;
+}

package/themes/kanagawa-lotus.css

@@ -0,0 +1,136 @@
+/* theme-name: 神奈川莲 */
+/* theme-name-en: Kanagawa Lotus */
+/* theme-group: classic */
+:root {
+	color-scheme: light;
+	--bg: #f2ecbc;
+	--bg-elev: #e5ddb0;
+	--bg-elev2: #dcd5ac;
+	--border: #d5cea3;
+	--border-soft: #e5ddb0;
+	--text: #545464;
+	--text-dim: #65624f;
+	--text-faint: #6b685a;
+	--accent: #4d699b;
+	--accent-soft: rgba(77, 105, 155, 0.14);
+	--green: #6f894e;
+	--green-soft: rgba(111, 137, 78, 0.12);
+	--red: #c84053;
+	--red-soft: rgba(200, 64, 83, 0.1);
+	--amber: #de9800;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
+	--term-bg: #f2ecbc;
+	--term-fg: #545464;
+	--term-cursor: #4d699b;
+	--term-cursor-accent: #f2ecbc;
+	--term-selection: rgba(77, 105, 155, 0.24);
+	--term-black: #545464;
+	--term-red: #c84053;
+	--term-green: #6f894e;
+	--term-yellow: #de9800;
+	--term-blue: #4d699b;
+	--term-magenta: #b35b79;
+	--term-cyan: #597b75;
+	--term-white: #e5ddb0;
+	--term-bright-black: #716e61;
+	--term-bright-red: #c84053;
+	--term-bright-green: #6f894e;
+	--term-bright-yellow: #de9800;
+	--term-bright-blue: #4d699b;
+	--term-bright-magenta: #b35b79;
+	--term-bright-cyan: #597b75;
+	--term-bright-white: #f2ecbc;
+	--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
+	--mermaid-font-size: 12px;
+	--tooltip-bg: #e5ddb0;
+	--code-bg: #e5ddb0;
+	--code-text: #545464;
+	--code-border: var(--border-soft);
+	--code-pad: 8px 10px;
+	--card-body-pad: 4px 14px 12px;
+	--err-text: #c84053;
+	--red-text: #c84053;
+	--amber-text: #a37000;
+	--info-blue: #4d699b;
+	--link: #4d699b;
+	--link-hover: #3d5680;
+	--link-soft: #4d699b;
+	--md-strong: #545464;
+	--skill-blue: #4d699b;
+	--plugin-purple: #b58cff;
+	--auth-green: #6f894e;
+	--scroll-thumb: #d5cea3;
+	--scroll-thumb-hover: #bfb586;
+	--notice-err-bg: #401d23;
+	--notice-warn-bg: #38251f;
+	--notice-info-bg: #1b2544;
+	--notice-err-border: #ef4444;
+	--notice-warn-border: #f59e0b;
+	--notice-info-border: #3b82f6;
+	--send-blue: #4d699b;
+	--send-blue-hover: #3d5680;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
+	--brand-grad-a: #4d699b;
+	--brand-grad-b: #624c83;
+	--on-amber: #1a1a1a;
+	--search-active-fg: #1a1d26;
+	--switch-knob: #ffffff;
+	--bg-elev3: rgba(255, 255, 255, 0.06);
+	--sunken-bg: rgba(0, 0, 0, 0.15);
+	--glow-015: rgba(255, 255, 255, 0.015);
+	--glow-025: rgba(255, 255, 255, 0.025);
+	--glow-03: rgba(255, 255, 255, 0.03);
+	--glow-04: rgba(255, 255, 255, 0.04);
+	--glow-05: rgba(255, 255, 255, 0.05);
+	--glow-12: rgba(255, 255, 255, 0.12);
+	--glow-18: rgba(255, 255, 255, 0.18);
+	--glow-22: rgba(255, 255, 255, 0.22);
+	--glow-38: rgba(255, 255, 255, 0.38);
+	--control-fg: #716e61;
+	--control-bg: #e5ddb0;
+	--control-border: #d5cea3;
+	--bg-image: none;
+	--bg-image-dim: 0.78;
+	--bg-image-blur: 0px;
+	--wallpaper-panel-alpha: 100%;
+	--topbar-bg: #e5ddb0;
+	--statusbar-bg: #f2ecbc;
+	--panel-bg: #e5ddb0;
+	--card-bg: #e5ddb0;
+	--chip-bg: #dcd5ac;
+	--msgs-bg: #f2ecbc;
+	--inputbox-bg: #dcd5ac;
+	--menu-bg: var(--bg-elev2);
+}
+
+/* ---- syntax highlighting (Kanagawa Lotus) ---- */
+.hljs {
+	color: #545464;
+	background: #e5ddb0;
+}
+.hljs-keyword,
+.hljs-meta .hljs-keyword {
+	color: #624c83;
+	font-weight: 600;
+}
+.hljs-title,
+.hljs-title.function_ {
+	color: #4d699b;
+}
+.hljs-number,
+.hljs-literal {
+	color: #b35b79;
+}
+.hljs-string {
+	color: #6f894e;
+}
+.hljs-built_in,
+.hljs-type {
+	color: #a37000;
+}
+.hljs-comment {
+	color: #6b685a;
+	font-style: italic;
+}

package/themes/md-preview.css

@@ -17,6 +17,8 @@
 	--red: #f87171;
 	--red-soft: rgba(248, 113, 113, 0.12);
 	--amber: #fbbf24;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
 	--term-bg: #0b0d12;
 	--term-fg: #e6e8ef;
 	--term-cursor: #8b5cf6;
@@ -67,6 +69,8 @@
 	--notice-info-border: #3b82f6;
 	--send-blue: #3b82f6;
 	--send-blue-hover: #2563eb;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
 	--brand-grad-a: #8b5cf6;
 	--brand-grad-b: #6366f1;
 	--on-amber: #1a1a1a;

package/themes/mist.css

@@ -17,6 +17,8 @@
 	--red: #dc2626;
 	--red-soft: rgba(220, 38, 38, 0.1);
 	--amber: #d97706;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
 	--term-bg: #f8fafc;
 	--term-fg: #1e293b;
 	--term-cursor: #0284c7;
@@ -67,6 +69,8 @@
 	--notice-info-border: #2563eb;
 	--send-blue: #0284c7;
 	--send-blue-hover: #0369a1;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
 	--brand-grad-a: #38bdf8;
 	--brand-grad-b: #0284c7;
 	--on-amber: #1a1a1a;

package/themes/nord.css

@@ -18,6 +18,8 @@
 	--red: #bf616a;
 	--red-soft: rgba(191, 97, 106, 0.12);
 	--amber: #ebcb8b;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
 	--term-bg: #242933;
 	--term-fg: #d8dee9;
 	--term-cursor: #88c0d0;
@@ -68,6 +70,8 @@
 	--notice-info-border: #3b82f6;
 	--send-blue: #88c0d0;
 	--send-blue-hover: #81a1c1;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
 	--brand-grad-a: #88c0d0;
 	--brand-grad-b: #81a1c1;
 	--on-amber: #1a1a1a;

package/themes/one-dark.css

@@ -18,6 +18,8 @@
 	--red: #e06c75;
 	--red-soft: rgba(224, 108, 117, 0.12);
 	--amber: #e5c07b;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
 	--term-bg: #1e2227;
 	--term-fg: #abb2bf;
 	--term-cursor: #528bff;
@@ -68,6 +70,8 @@
 	--notice-info-border: #3b82f6;
 	--send-blue: #61afef;
 	--send-blue-hover: #528bff;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
 	--brand-grad-a: #61afef;
 	--brand-grad-b: #c678dd;
 	--on-amber: #1a1a1a;

package/themes/paper.css

@@ -17,6 +17,8 @@
 	--red: #b91c1c;
 	--red-soft: rgba(185, 28, 28, 0.1);
 	--amber: #d97706;
+	--blue: #3b82f6;
+	--blue-soft: rgba(59, 130, 246, 0.12);
 	--term-bg: #f7f1e3;
 	--term-fg: #3f372c;
 	--term-cursor: #b45309;
@@ -67,6 +69,8 @@
 	--notice-info-border: #57534e;
 	--send-blue: #b45309;
 	--send-blue-hover: #92400e;
+	--stop-red: #ef4444;
+	--stop-red-hover: #dc2626;
 	--brand-grad-a: #d97706;
 	--brand-grad-b: #b45309;
 	--on-amber: #1a1a1a;