diff --git a/theme/ai.js b/theme/ai.js index b5dae1d65..76895a34b 100644 --- a/theme/ai.js +++ b/theme/ai.js @@ -367,30 +367,31 @@ /* =================================================================== */ function injectStyles() { let css = ` -#ht-ai-btn{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);min-width:60px;height:60px;border-radius:30px;background:linear-gradient(45deg, #b31328, #d42d3f, #2d5db4, #3470e4);background-size:300% 300%;animation:gradientShift 8s ease infinite;color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:99999;box-shadow:0 2px 8px rgba(0,0,0,.4);transition:opacity .2s, filter .2s; padding:0 20px} +#ht-ai-btn{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);min-width:60px;height:60px;border-radius:30px;background:var(--ht-ai-fab-bg,linear-gradient(45deg,#b31328,#d42d3f,#2d5db4,#3470e4));background-size:300% 300%;animation:gradientShift 8s ease infinite;color:var(--ht-ai-fab-fg,#fff);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:99999;box-shadow:0 12px 26px var(--ht-ai-shadow,rgba(0,0,0,.45));transition:opacity .2s, filter .2s; padding:0 20px;border:1px solid var(--ht-ai-fab-border,rgba(255,255,255,.12))} #ht-ai-btn.ht-ai-locked{filter:grayscale(.2);opacity:.85} #ht-ai-btn span{margin-left:8px;font-weight:bold} @keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} #ht-ai-btn:hover{opacity:.85} @media(max-width:768px){#ht-ai-btn{display:none}} -#ht-ai-tooltip{position:fixed;padding:6px 8px;background:#111;color:#fff;border-radius:4px;font-size:13px;white-space:pre-wrap;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .15s ease,transform .15s ease;z-index:100000} +#ht-ai-tooltip{position:fixed;padding:6px 8px;background:var(--ht-ai-tooltip-bg,#111);color:var(--ht-ai-tooltip-fg,#fff);border-radius:6px;font-size:13px;white-space:pre-wrap;pointer-events:none;opacity:0;transform:translate(-50%,-8px);transition:opacity .15s ease,transform .15s ease;z-index:100000;box-shadow:0 8px 20px var(--ht-ai-shadow,rgba(0,0,0,.35))} #ht-ai-tooltip.show{opacity:1;transform:translate(-50%,-12px)} -#ht-ai-panel{position:fixed;top:0;right:0;height:100%;max-width:90vw;background:#000;color:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;z-index:100000;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif} +#ht-ai-panel{position:fixed;top:0;right:0;height:100%;max-width:90vw;background:var(--ht-ai-panel-bg,#0b0b0b);color:var(--ht-ai-panel-fg,#fff);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;z-index:100000;font-family:var(--body-font,system-ui)} #ht-ai-panel.open{transform:translateX(0)} @media(max-width:768px){#ht-ai-panel{display:none}} -#ht-ai-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #333;flex-wrap:wrap} +#ht-ai-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--ht-ai-border,#333);background:var(--ht-ai-header-bg,transparent);flex-wrap:wrap} #ht-ai-header strong{flex-shrink:0} #ht-ai-header .ht-actions{display:flex;gap:8px;align-items:center;margin-left:auto} -#ht-ai-close,#ht-ai-reset{cursor:pointer;font-size:18px;background:none;border:none;color:#fff;padding:0} +#ht-ai-close,#ht-ai-reset{cursor:pointer;font-size:18px;background:none;border:none;color:var(--ht-ai-panel-fg,#fff);padding:0} #ht-ai-close:hover,#ht-ai-reset:hover{opacity:.7} -#ht-ai-chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px} +#ht-ai-chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px;background:var(--ht-ai-chat-bg,transparent)} .ht-msg{max-width:90%;line-height:1.4;padding:10px 12px;border-radius:8px;white-space:pre-wrap;word-wrap:break-word} -.ht-user{align-self:flex-end;background:${BRAND_RED}} -.ht-ai{align-self:flex-start;background:#222} -.ht-context{align-self:flex-start;background:#444;font-style:italic;font-size:13px} -#ht-ai-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #333} -#ht-ai-question{flex:1;min-height:40px;max-height:120px;resize:vertical;padding:8px;border-radius:6px;border:none;font-size:14px} -#ht-ai-send{padding:0 18px;border:none;border-radius:6px;background:${BRAND_RED};color:#fff;font-size:14px;cursor:pointer} +.ht-user{align-self:flex-end;background:var(--ht-ai-user-bg,${BRAND_RED});color:var(--ht-ai-user-fg,#fff)} +.ht-ai{align-self:flex-start;background:var(--ht-ai-bot-bg,#222);color:var(--ht-ai-bot-fg,#fff)} +.ht-context{align-self:flex-start;background:var(--ht-ai-context-bg,#333);color:var(--ht-ai-context-fg,#ddd);font-style:italic;font-size:13px} +#ht-ai-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--ht-ai-border,#333);background:var(--ht-ai-input-bg,transparent)} +#ht-ai-question{flex:1;min-height:40px;max-height:120px;resize:vertical;padding:8px;border-radius:8px;border:1px solid var(--ht-ai-border,#333);background:var(--ht-ai-field-bg,#111);color:var(--ht-ai-panel-fg,#fff);font-size:14px} +#ht-ai-question::placeholder{color:var(--ht-ai-muted,#aaa)} +#ht-ai-send{padding:0 18px;border:none;border-radius:8px;background:var(--ht-ai-accent,${BRAND_RED});color:var(--ht-ai-accent-fg,#fff);font-size:14px;cursor:pointer} #ht-ai-send:disabled{opacity:.5;cursor:not-allowed} /* Loader */ .ht-loading{display:inline-flex;align-items:center;gap:4px} @@ -401,18 +402,18 @@ ::selection{background:#ffeb3b;color:#000} ::-moz-selection{background:#ffeb3b;color:#000} /* NEW: resizer handle */ -#ht-ai-resizer{position:absolute;left:0;top:0;width:8px;height:100%;cursor:ew-resize;background:rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.15);transition:background .2s ease} -#ht-ai-resizer:hover{background:rgba(255,255,255,.15);border-right:1px solid rgba(255,255,255,.3)} -#ht-ai-resizer:active{background:rgba(255,255,255,.25)} -#ht-ai-resizer::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:20px;background:rgba(255,255,255,.4);border-radius:1px}`; +#ht-ai-resizer{position:absolute;left:0;top:0;width:8px;height:100%;cursor:ew-resize;background:var(--ht-ai-resizer-bg,rgba(255,255,255,.08));border-right:1px solid var(--ht-ai-resizer-border,rgba(255,255,255,.15));transition:background .2s ease} +#ht-ai-resizer:hover{background:var(--ht-ai-resizer-bg-hover,rgba(255,255,255,.15));border-right:1px solid var(--ht-ai-resizer-border-hover,rgba(255,255,255,.3))} +#ht-ai-resizer:active{background:var(--ht-ai-resizer-bg-active,rgba(255,255,255,.25))} +#ht-ai-resizer::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:20px;background:var(--ht-ai-resizer-handle,rgba(255,255,255,.4));border-radius:1px}`; css += ` -#ht-ai-login-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:100200} -#ht-ai-login-card{max-width:420px;width:calc(100% - 32px);padding:20px;border-radius:14px;background:#111;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(0,0,0,.4);text-align:center;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif} +#ht-ai-login-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--ht-ai-overlay-bg,rgba(0,0,0,.6));backdrop-filter:blur(6px);z-index:100200} +#ht-ai-login-card{max-width:420px;width:calc(100% - 32px);padding:20px;border-radius:14px;background:var(--ht-ai-panel-bg,#111);border:1px solid var(--ht-ai-border,rgba(255,255,255,.08));box-shadow:0 12px 28px var(--ht-ai-shadow,rgba(0,0,0,.4));text-align:center;color:var(--ht-ai-panel-fg,#fff);font-family:var(--body-font,system-ui)} .ht-ai-login-title{font-size:1.1rem;font-weight:700;margin-bottom:8px} -.ht-ai-login-text{font-size:.95rem;color:#cfcfcf;margin-bottom:12px} -.ht-ai-login-link{display:inline-block;margin-bottom:16px;color:#ff6b5b;text-decoration:none;word-break:break-all} +.ht-ai-login-text{font-size:.95rem;color:var(--ht-ai-muted,#cfcfcf);margin-bottom:12px} +.ht-ai-login-link{display:inline-block;margin-bottom:16px;color:var(--ht-ai-accent,#ff6b5b);text-decoration:none;word-break:break-all} .ht-ai-login-link:hover{text-decoration:underline} -.ht-ai-login-close{background:#b31328;color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer} +.ht-ai-login-close{background:var(--ht-ai-accent,#b31328);color:var(--ht-ai-accent-fg,#fff);border:none;border-radius:8px;padding:8px 14px;cursor:pointer} .ht-ai-login-close:hover{opacity:.9} `; const s = document.createElement("style"); diff --git a/theme/css/general.css b/theme/css/general.css index e1e2364bc..ed240d14e 100644 --- a/theme/css/general.css +++ b/theme/css/general.css @@ -247,27 +247,184 @@ blockquote { border-block-end: .1em solid var(--quote-border); } -.warning { - margin: 20px; - padding: 0 20px; - border-inline-start: 2px solid var(--warning-border); +.admonition, +blockquote.admonition, +.blockquote-tag, +.note, +.tip, +.warning, +.caution, +.important, +.info, +.success, +.danger, +blockquote.note, +blockquote.tip, +blockquote.warning, +blockquote.caution, +blockquote.important, +blockquote.info, +blockquote.success, +blockquote.danger { + --admonition-bg: var(--admonition-default-bg); + --admonition-border: var(--admonition-default-border); + --admonition-accent: var(--admonition-default-accent); + --admonition-icon: var(--admonition-icon-default); + position: relative; + margin: 20px 0; + padding: 14px 18px 14px 54px; + color: var(--fg); + background: var(--admonition-bg); + border: 1px solid var(--admonition-border); + border-block-start: none; + border-block-end: none; + border-radius: 12px; + box-shadow: 0 12px 28px var(--admonition-shadow), inset 4px 0 0 var(--admonition-accent); } -.warning:before { +.blockquote-tag { + padding: 14px 18px; +} + +.admonition.note, +.note, +blockquote.note { + --admonition-bg: var(--admonition-note-bg); + --admonition-border: var(--admonition-note-border); + --admonition-accent: var(--admonition-note-accent); + --admonition-icon: var(--admonition-icon-note); +} + +.admonition.info, +.info, +blockquote.info { + --admonition-bg: var(--admonition-note-bg); + --admonition-border: var(--admonition-note-border); + --admonition-accent: var(--admonition-note-accent); + --admonition-icon: var(--admonition-icon-note); +} + +.blockquote-tag-note, +.blockquote-tag-info { + --admonition-bg: var(--admonition-note-bg); + --admonition-border: var(--admonition-note-border); + --admonition-accent: var(--admonition-note-accent); +} + +.admonition.tip, +.tip, +blockquote.tip, +.blockquote-tag-tip, +.admonition.success, +.success, +blockquote.success { + --admonition-bg: var(--admonition-tip-bg); + --admonition-border: var(--admonition-tip-border); + --admonition-accent: var(--admonition-tip-accent); + --admonition-icon: var(--admonition-icon-tip); +} + +.admonition.warning, +.warning, +blockquote.warning, +.blockquote-tag-warning, +.admonition.important, +.important, +blockquote.important { + --admonition-bg: var(--admonition-warning-bg); + --admonition-border: var(--admonition-warning-border); + --admonition-accent: var(--admonition-warning-accent); + --admonition-icon: var(--admonition-icon-warning); +} + +.admonition.caution, +.caution, +blockquote.caution, +.blockquote-tag-caution, +.admonition.danger, +.danger, +blockquote.danger { + --admonition-bg: var(--admonition-caution-bg); + --admonition-border: var(--admonition-caution-border); + --admonition-accent: var(--admonition-caution-accent); + --admonition-icon: var(--admonition-icon-caution); +} + +.admonition::before, +blockquote.admonition::before, +.note::before, +.tip::before, +.warning::before, +.caution::before, +.important::before, +.info::before, +.success::before, +.danger::before, +blockquote.note::before, +blockquote.tip::before, +blockquote.warning::before, +blockquote.caution::before, +blockquote.important::before, +blockquote.info::before, +blockquote.success::before, +blockquote.danger::before { + content: ""; position: absolute; - width: 3rem; - height: 3rem; - margin-inline-start: calc(-1.5rem - 21px); - content: "ⓘ"; - text-align: center; - background-color: var(--bg); - color: var(--warning-border); - font-weight: bold; - font-size: 2rem; + top: 14px; + left: 18px; + width: 20px; + height: 20px; + background-color: var(--admonition-accent); + mask: var(--admonition-icon) no-repeat center / contain; + -webkit-mask: var(--admonition-icon) no-repeat center / contain; } -blockquote .warning:before { - background-color: var(--quote-bg); +.admonition-title { + margin: 0 0 8px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + font-size: 0.8em; + color: var(--admonition-accent); +} + +.blockquote-tag-title { + margin: 0 0 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + font-size: 0.8em; + color: var(--admonition-accent); + display: flex; + align-items: center; + gap: 8px; +} + +.blockquote-tag-title svg { + flex: 0 0 auto; + fill: currentColor; +} + +.admonition > :last-child, +blockquote.admonition > :last-child, +.blockquote-tag > :last-child, +.note > :last-child, +.tip > :last-child, +.warning > :last-child, +.caution > :last-child, +.important > :last-child, +.info > :last-child, +.success > :last-child, +.danger > :last-child, +blockquote.note > :last-child, +blockquote.tip > :last-child, +blockquote.warning > :last-child, +blockquote.caution > :last-child, +blockquote.important > :last-child, +blockquote.info > :last-child, +blockquote.success > :last-child, +blockquote.danger > :last-child { + margin-bottom: 0; } kbd { diff --git a/theme/css/variables.css b/theme/css/variables.css index a9559a025..716c85959 100644 --- a/theme/css/variables.css +++ b/theme/css/variables.css @@ -19,6 +19,11 @@ --grid-overlay-color: rgba(43, 121, 255, 0.035); --particle-color: #2b79ff; --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */ + --admonition-icon-default: url("data:image/svg+xml;utf8,"); + --admonition-icon-note: var(--admonition-icon-default); + --admonition-icon-tip: url("data:image/svg+xml;utf8,"); + --admonition-icon-warning: url("data:image/svg+xml;utf8,"); + --admonition-icon-caution: url("data:image/svg+xml;utf8,"); } /* Themes */ @@ -54,6 +59,22 @@ --table-border-color: hsl(210, 25%, 13%); --table-header-bg: hsl(210, 25%, 28%); --table-alternate-bg: hsl(210, 25%, 11%); + --admonition-shadow: rgba(0, 0, 0, 0.4); + --admonition-default-bg: hsl(210, 33%, 16%); + --admonition-default-border: hsl(210, 38%, 28%); + --admonition-default-accent: #59a7ff; + --admonition-note-bg: hsl(210, 45%, 20%); + --admonition-note-border: hsl(210, 45%, 30%); + --admonition-note-accent: #6bb2ff; + --admonition-tip-bg: hsl(46, 45%, 20%); + --admonition-tip-border: hsl(46, 45%, 30%); + --admonition-tip-accent: #ffd166; + --admonition-warning-bg: hsl(0, 42%, 19%); + --admonition-warning-border: hsl(0, 38%, 30%); + --admonition-warning-accent: #ff6b6b; + --admonition-caution-bg: hsl(28, 45%, 19%); + --admonition-caution-border: hsl(28, 45%, 30%); + --admonition-caution-accent: #ffb25b; --searchbar-border-color: #848484; --searchbar-bg: #424242; @@ -103,6 +124,22 @@ --table-border-color: hsl(200, 7%, 13%); --table-header-bg: hsl(200, 7%, 28%); --table-alternate-bg: hsl(200, 7%, 11%); + --admonition-shadow: rgba(0, 0, 0, 0.4); + --admonition-default-bg: hsl(205, 20%, 16%); + --admonition-default-border: hsl(205, 22%, 28%); + --admonition-default-accent: #63a7ff; + --admonition-note-bg: hsl(205, 32%, 20%); + --admonition-note-border: hsl(205, 32%, 30%); + --admonition-note-accent: #6bb2ff; + --admonition-tip-bg: hsl(46, 42%, 20%); + --admonition-tip-border: hsl(46, 42%, 30%); + --admonition-tip-accent: #ffd166; + --admonition-warning-bg: hsl(0, 38%, 19%); + --admonition-warning-border: hsl(0, 36%, 30%); + --admonition-warning-accent: #ff6b6b; + --admonition-caution-bg: hsl(28, 42%, 19%); + --admonition-caution-border: hsl(28, 42%, 30%); + --admonition-caution-accent: #ffb25b; --searchbar-border-color: #aaa; --searchbar-bg: #b7b7b7; @@ -152,6 +189,22 @@ --table-border-color: hsl(0, 0%, 95%); --table-header-bg: hsl(0, 0%, 80%); --table-alternate-bg: hsl(0, 0%, 97%); + --admonition-shadow: rgba(14, 24, 36, 0.12); + --admonition-default-bg: hsl(210, 60%, 96%); + --admonition-default-border: hsl(210, 50%, 85%); + --admonition-default-accent: #1b5fd6; + --admonition-note-bg: hsl(210, 80%, 94%); + --admonition-note-border: hsl(210, 60%, 85%); + --admonition-note-accent: #1b5fd6; + --admonition-tip-bg: hsl(46, 100%, 90%); + --admonition-tip-border: hsl(46, 80%, 78%); + --admonition-tip-accent: #9a6a00; + --admonition-warning-bg: hsl(0, 90%, 92%); + --admonition-warning-border: hsl(0, 70%, 78%); + --admonition-warning-accent: #c0392b; + --admonition-caution-bg: hsl(28, 100%, 92%); + --admonition-caution-border: hsl(28, 80%, 78%); + --admonition-caution-accent: #b85c00; --searchbar-border-color: #aaa; --searchbar-bg: #fafafa; @@ -201,6 +254,22 @@ --table-border-color: hsl(226, 23%, 16%); --table-header-bg: hsl(226, 23%, 31%); --table-alternate-bg: hsl(226, 23%, 14%); + --admonition-shadow: rgba(0, 0, 0, 0.4); + --admonition-default-bg: hsl(222, 28%, 16%); + --admonition-default-border: hsl(222, 30%, 28%); + --admonition-default-accent: #5aa7ff; + --admonition-note-bg: hsl(220, 36%, 20%); + --admonition-note-border: hsl(220, 36%, 30%); + --admonition-note-accent: #6bb2ff; + --admonition-tip-bg: hsl(46, 42%, 20%); + --admonition-tip-border: hsl(46, 42%, 30%); + --admonition-tip-accent: #ffd166; + --admonition-warning-bg: hsl(0, 38%, 19%); + --admonition-warning-border: hsl(0, 36%, 30%); + --admonition-warning-accent: #ff6b6b; + --admonition-caution-bg: hsl(28, 42%, 19%); + --admonition-caution-border: hsl(28, 42%, 30%); + --admonition-caution-accent: #ffb25b; --searchbar-border-color: #aaa; --searchbar-bg: #aeaec6; @@ -219,6 +288,102 @@ --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%) hue-rotate(156deg) brightness(85%) contrast(90%); } +.hacktricks-dark { + --admonition-shadow: rgba(0, 0, 0, 0.4); + --admonition-default-bg: hsl(222, 28%, 16%); + --admonition-default-border: hsl(222, 30%, 28%); + --admonition-default-accent: #5aa7ff; + --admonition-note-bg: hsl(220, 36%, 20%); + --admonition-note-border: hsl(220, 36%, 30%); + --admonition-note-accent: #6bb2ff; + --admonition-tip-bg: hsl(46, 42%, 20%); + --admonition-tip-border: hsl(46, 42%, 30%); + --admonition-tip-accent: #ffd166; + --admonition-warning-bg: hsl(0, 38%, 19%); + --admonition-warning-border: hsl(0, 36%, 30%); + --admonition-warning-accent: #ff6b6b; + --admonition-caution-bg: hsl(28, 42%, 19%); + --admonition-caution-border: hsl(28, 42%, 30%); + --admonition-caution-accent: #ffb25b; + --ht-ai-panel-bg: hsl(220, 22%, 12%); + --ht-ai-panel-fg: #e9edf3; + --ht-ai-header-bg: hsl(220, 24%, 14%); + --ht-ai-border: hsl(220, 18%, 24%); + --ht-ai-chat-bg: hsl(220, 22%, 11%); + --ht-ai-input-bg: hsl(220, 24%, 12%); + --ht-ai-field-bg: hsl(220, 18%, 16%); + --ht-ai-muted: #aab3c2; + --ht-ai-accent: #ff6b6b; + --ht-ai-accent-fg: #1a0d0d; + --ht-ai-user-bg: #ff6b6b; + --ht-ai-user-fg: #1a0d0d; + --ht-ai-bot-bg: hsl(220, 16%, 18%); + --ht-ai-bot-fg: #e6edf6; + --ht-ai-context-bg: hsl(220, 14%, 20%); + --ht-ai-context-fg: #cbd5e1; + --ht-ai-fab-bg: linear-gradient(135deg, #ff6b6b, #ffb25b, #6bb2ff); + --ht-ai-fab-fg: #0b0f16; + --ht-ai-fab-border: rgba(255, 255, 255, 0.12); + --ht-ai-tooltip-bg: hsl(220, 18%, 18%); + --ht-ai-tooltip-fg: #f1f5f9; + --ht-ai-shadow: rgba(0, 0, 0, 0.45); + --ht-ai-overlay-bg: rgba(8, 12, 18, 0.6); + --ht-ai-resizer-bg: rgba(255, 255, 255, 0.06); + --ht-ai-resizer-border: rgba(255, 255, 255, 0.12); + --ht-ai-resizer-bg-hover: rgba(255, 255, 255, 0.12); + --ht-ai-resizer-border-hover: rgba(255, 255, 255, 0.22); + --ht-ai-resizer-bg-active: rgba(255, 255, 255, 0.2); + --ht-ai-resizer-handle: rgba(255, 255, 255, 0.35); +} + +.hacktricks-light { + --admonition-shadow: rgba(14, 24, 36, 0.12); + --admonition-default-bg: hsl(210, 60%, 96%); + --admonition-default-border: hsl(210, 50%, 85%); + --admonition-default-accent: #1b5fd6; + --admonition-note-bg: hsl(210, 80%, 94%); + --admonition-note-border: hsl(210, 60%, 85%); + --admonition-note-accent: #1b5fd6; + --admonition-tip-bg: hsl(46, 100%, 90%); + --admonition-tip-border: hsl(46, 80%, 78%); + --admonition-tip-accent: #9a6a00; + --admonition-warning-bg: hsl(0, 90%, 92%); + --admonition-warning-border: hsl(0, 70%, 78%); + --admonition-warning-accent: #c0392b; + --admonition-caution-bg: hsl(28, 100%, 92%); + --admonition-caution-border: hsl(28, 80%, 78%); + --admonition-caution-accent: #b85c00; + --ht-ai-panel-bg: hsl(210, 40%, 98%); + --ht-ai-panel-fg: #111827; + --ht-ai-header-bg: hsl(210, 50%, 96%); + --ht-ai-border: hsl(210, 30%, 86%); + --ht-ai-chat-bg: #ffffff; + --ht-ai-input-bg: hsl(210, 40%, 96%); + --ht-ai-field-bg: #ffffff; + --ht-ai-muted: #6b7280; + --ht-ai-accent: #496dff; + --ht-ai-accent-fg: #ffffff; + --ht-ai-user-bg: #496dff; + --ht-ai-user-fg: #ffffff; + --ht-ai-bot-bg: hsl(210, 30%, 94%); + --ht-ai-bot-fg: #111827; + --ht-ai-context-bg: hsl(210, 30%, 92%); + --ht-ai-context-fg: #334155; + --ht-ai-fab-bg: linear-gradient(135deg, #496dff, #9a6a00, #ff6b6b); + --ht-ai-fab-fg: #ffffff; + --ht-ai-fab-border: rgba(0, 0, 0, 0.08); + --ht-ai-tooltip-bg: #111827; + --ht-ai-tooltip-fg: #ffffff; + --ht-ai-shadow: rgba(14, 24, 36, 0.18); + --ht-ai-overlay-bg: rgba(15, 23, 42, 0.35); + --ht-ai-resizer-bg: rgba(0, 0, 0, 0.06); + --ht-ai-resizer-border: rgba(0, 0, 0, 0.12); + --ht-ai-resizer-bg-hover: rgba(0, 0, 0, 0.12); + --ht-ai-resizer-border-hover: rgba(0, 0, 0, 0.22); + --ht-ai-resizer-bg-active: rgba(0, 0, 0, 0.2); + --ht-ai-resizer-handle: rgba(0, 0, 0, 0.35); +} + .rust { --bg: hsl(60, 9%, 87%); --fg: #262625;