improve style

This commit is contained in:
Carlos Polop
2026-01-28 15:05:04 +01:00
parent 8c1b0c4522
commit 6d17062d44
3 changed files with 360 additions and 37 deletions

View File

@@ -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");

View File

@@ -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 {

View File

@@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/></svg>");
--admonition-icon-note: var(--admonition-icon-default);
--admonition-icon-tip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/></svg>");
--admonition-icon-warning: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2v-4h2v4z'/></svg>");
--admonition-icon-caution: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'/></svg>");
}
/* 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;