File size: 3,856 Bytes
8ef3a6b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | /* ISCC Copilot Widget Theme for Documentation Sites
*
* Shared across all ISCC documentation sites. Do not modify per project.
*
* Styles the Chainlit copilot chat widget to match the ISCC brand.
* Injected into the widget Shadow DOM via customCssUrl.
*
* Zensical sets html { font-size: 125% } (20px) which inflates all rem-based
* sizes inside the Chainlit widget by 25%. Instead of blanket zoom (which
* over-corrects body text), we pin Tailwind text utilities to their intended
* pixel values and zoom only the self-contained toggle button.
*/
/* Toggle button: self-contained element, zoom works cleanly here */
#chainlit-copilot-button {
zoom: 0.8;
}
/* --- Fix Tailwind text utilities inflated by 125% root font-size ---
* Tailwind rem values resolve against html 20px instead of 16px.
* Pin each utility to its intended pixel size. */
.text-xs { font-size: 12px !important; line-height: 16px !important; }
.text-sm { font-size: 14px !important; line-height: 20px !important; }
.text-base { font-size: 16px !important; line-height: 24px !important; }
.text-lg { font-size: 18px !important; line-height: 28px !important; }
.text-xl { font-size: 20px !important; line-height: 28px !important; }
.text-2xl { font-size: 24px !important; line-height: 32px !important; }
/* --- Widen the chat panel --- */
.copilot-container-collapsed {
min-width: 420px !important;
}
/* Fix inflated rem-based spacing inside the chat panel.
* Scale factor: 0.8rem per intended 1rem (16/20 = 0.8). */
[data-radix-popper-content-wrapper] {
font-size: 16px;
}
/* Ensure chat message body text renders at readable size */
#chainlit-copilot-chat p,
#chainlit-copilot-chat li,
#chainlit-copilot-chat span:not([class]),
#chainlit-copilot-chat div:not([class]) > span {
font-size: 15px !important;
line-height: 1.2 !important;
}
/* Force light theme variables - ISCC brand on white background.
* Target both .light and .dark to override regardless of server theme. */
:root,
:host,
.light,
.dark {
--background: 0 0% 100% !important;
--foreground: 213 69% 23% !important;
--primary: 356 89% 67% !important;
--primary-foreground: 0 0% 100% !important;
--secondary: 210 30% 95% !important;
--secondary-foreground: 213 69% 23% !important;
--accent: 210 30% 95% !important;
--accent-foreground: 213 69% 23% !important;
--muted: 210 20% 96% !important;
--muted-foreground: 213 40% 40% !important;
--card: 0 0% 100% !important;
--card-foreground: 213 69% 23% !important;
--popover: 0 0% 100% !important;
--popover-foreground: 213 69% 23% !important;
--border: 210 20% 85% !important;
--input: 0 0% 100% !important;
--ring: 211 100% 35% !important;
}
/* Floating toggle button - ISCC Coral */
button.bg-primary.rounded-full,
button[class*="bg-primary"][class*="rounded-full"] {
background-color: #f56169 !important;
background: #f56169 !important;
}
button.bg-primary.rounded-full:hover,
button[class*="bg-primary"][class*="rounded-full"]:hover {
background-color: #e04550 !important;
background: #e04550 !important;
}
/* Send button and primary actions - ISCC Blue */
button.bg-primary:not(.rounded-full),
button[class*="bg-primary"]:not([class*="rounded-full"]),
.bg-primary:not(.rounded-full) {
background-color: #0054b2 !important;
background: #0054b2 !important;
}
button.bg-primary:not(.rounded-full):hover,
button[class*="bg-primary"]:not([class*="rounded-full"]):hover,
.bg-primary:not(.rounded-full):hover {
background-color: #123663 !important;
background: #123663 !important;
}
/* Links - ISCC Blue */
a {
color: #0054b2 !important;
}
/* Code blocks - ISCC navy */
pre,
pre code,
.hljs {
background-color: #0d2847 !important;
color: #e6edf5 !important;
}
/* Inline code */
code:not(pre code):not(.hljs) {
background-color: #e8ebef !important;
color: inherit !important;
}
|