Skip to content

Commit 6d17062

Browse files
carlospolopcarlospolop
committed
improve style
1 parent 8c1b0c4 commit 6d17062

File tree

3 files changed

+361
-38
lines changed

3 files changed

+361
-38
lines changed

‎theme/ai.js‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -367,30 +367,31 @@
367367
/* =================================================================== */
368368
function injectStyles() {
369369
let css = `
370-
#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}
370+
#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))}
371371
#ht-ai-btn.ht-ai-locked{filter:grayscale(.2);opacity:.85}
372372
#ht-ai-btn span{margin-left:8px;font-weight:bold}
373373
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
374374
#ht-ai-btn:hover{opacity:.85}
375375
@media(max-width:768px){#ht-ai-btn{display:none}}
376-
#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}
376+
#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))}
377377
#ht-ai-tooltip.show{opacity:1;transform:translate(-50%,-12px)}
378-
#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}
378+
#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)}
379379
#ht-ai-panel.open{transform:translateX(0)}
380380
@media(max-width:768px){#ht-ai-panel{display:none}}
381-
#ht-ai-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #333;flex-wrap:wrap}
381+
#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}
382382
#ht-ai-header strong{flex-shrink:0}
383383
#ht-ai-header .ht-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
384-
#ht-ai-close,#ht-ai-reset{cursor:pointer;font-size:18px;background:none;border:none;color:#fff;padding:0}
384+
#ht-ai-close,#ht-ai-reset{cursor:pointer;font-size:18px;background:none;border:none;color:var(--ht-ai-panel-fg,#fff);padding:0}
385385
#ht-ai-close:hover,#ht-ai-reset:hover{opacity:.7}
386-
#ht-ai-chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px}
386+
#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)}
387387
.ht-msg{max-width:90%;line-height:1.4;padding:10px 12px;border-radius:8px;white-space:pre-wrap;word-wrap:break-word}
388-
.ht-user{align-self:flex-end;background:${BRAND_RED}}
389-
.ht-ai{align-self:flex-start;background:#222}
390-
.ht-context{align-self:flex-start;background:#444;font-style:italic;font-size:13px}
391-
#ht-ai-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #333}
392-
#ht-ai-question{flex:1;min-height:40px;max-height:120px;resize:vertical;padding:8px;border-radius:6px;border:none;font-size:14px}
393-
#ht-ai-send{padding:0 18px;border:none;border-radius:6px;background:${BRAND_RED};color:#fff;font-size:14px;cursor:pointer}
388+
.ht-user{align-self:flex-end;background:var(--ht-ai-user-bg,${BRAND_RED});color:var(--ht-ai-user-fg,#fff)}
389+
.ht-ai{align-self:flex-start;background:var(--ht-ai-bot-bg,#222);color:var(--ht-ai-bot-fg,#fff)}
390+
.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}
391+
#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)}
392+
#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}
393+
#ht-ai-question::placeholder{color:var(--ht-ai-muted,#aaa)}
394+
#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}
394395
#ht-ai-send:disabled{opacity:.5;cursor:not-allowed}
395396
/* Loader */
396397
.ht-loading{display:inline-flex;align-items:center;gap:4px}
@@ -401,18 +402,18 @@
401402
::selection{background:#ffeb3b;color:#000}
402403
::-moz-selection{background:#ffeb3b;color:#000}
403404
/* NEW: resizer handle */
404-
#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}
405-
#ht-ai-resizer:hover{background:rgba(255,255,255,.15);border-right:1px solid rgba(255,255,255,.3)}
406-
#ht-ai-resizer:active{background:rgba(255,255,255,.25)}
407-
#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}`;
405+
#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}
406+
#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))}
407+
#ht-ai-resizer:active{background:var(--ht-ai-resizer-bg-active,rgba(255,255,255,.25))}
408+
#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}`;
408409
css += `
409-
#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}
410-
#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}
410+
#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}
411+
#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)}
411412
.ht-ai-login-title{font-size:1.1rem;font-weight:700;margin-bottom:8px}
412-
.ht-ai-login-text{font-size:.95rem;color:#cfcfcf;margin-bottom:12px}
413-
.ht-ai-login-link{display:inline-block;margin-bottom:16px;color:#ff6b5b;text-decoration:none;word-break:break-all}
413+
.ht-ai-login-text{font-size:.95rem;color:var(--ht-ai-muted,#cfcfcf);margin-bottom:12px}
414+
.ht-ai-login-link{display:inline-block;margin-bottom:16px;color:var(--ht-ai-accent,#ff6b5b);text-decoration:none;word-break:break-all}
414415
.ht-ai-login-link:hover{text-decoration:underline}
415-
.ht-ai-login-close{background:#b31328;color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer}
416+
.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}
416417
.ht-ai-login-close:hover{opacity:.9}
417418
`;
418419
const s = document.createElement("style");

‎theme/css/general.css‎

Lines changed: 174 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -247,27 +247,184 @@ blockquote {
247247
border-block-end: .1em solid var(--quote-border);
248248
}
249249

250-
.warning {
251-
margin: 20px;
252-
padding: 0 20px;
253-
border-inline-start: 2px solid var(--warning-border);
250+
.admonition,
251+
blockquote.admonition,
252+
.blockquote-tag,
253+
.note,
254+
.tip,
255+
.warning,
256+
.caution,
257+
.important,
258+
.info,
259+
.success,
260+
.danger,
261+
blockquote.note,
262+
blockquote.tip,
263+
blockquote.warning,
264+
blockquote.caution,
265+
blockquote.important,
266+
blockquote.info,
267+
blockquote.success,
268+
blockquote.danger {
269+
--admonition-bg: var(--admonition-default-bg);
270+
--admonition-border: var(--admonition-default-border);
271+
--admonition-accent: var(--admonition-default-accent);
272+
--admonition-icon: var(--admonition-icon-default);
273+
position: relative;
274+
margin: 20px 0;
275+
padding: 14px 18px 14px 54px;
276+
color: var(--fg);
277+
background: var(--admonition-bg);
278+
border: 1px solid var(--admonition-border);
279+
border-block-start: none;
280+
border-block-end: none;
281+
border-radius: 12px;
282+
box-shadow: 0 12px 28px var(--admonition-shadow), inset 4px 0 0 var(--admonition-accent);
283+
}
284+
285+
.blockquote-tag {
286+
padding: 14px 18px;
287+
}
288+
289+
.admonition.note,
290+
.note,
291+
blockquote.note {
292+
--admonition-bg: var(--admonition-note-bg);
293+
--admonition-border: var(--admonition-note-border);
294+
--admonition-accent: var(--admonition-note-accent);
295+
--admonition-icon: var(--admonition-icon-note);
296+
}
297+
298+
.admonition.info,
299+
.info,
300+
blockquote.info {
301+
--admonition-bg: var(--admonition-note-bg);
302+
--admonition-border: var(--admonition-note-border);
303+
--admonition-accent: var(--admonition-note-accent);
304+
--admonition-icon: var(--admonition-icon-note);
305+
}
306+
307+
.blockquote-tag-note,
308+
.blockquote-tag-info {
309+
--admonition-bg: var(--admonition-note-bg);
310+
--admonition-border: var(--admonition-note-border);
311+
--admonition-accent: var(--admonition-note-accent);
312+
}
313+
314+
.admonition.tip,
315+
.tip,
316+
blockquote.tip,
317+
.blockquote-tag-tip,
318+
.admonition.success,
319+
.success,
320+
blockquote.success {
321+
--admonition-bg: var(--admonition-tip-bg);
322+
--admonition-border: var(--admonition-tip-border);
323+
--admonition-accent: var(--admonition-tip-accent);
324+
--admonition-icon: var(--admonition-icon-tip);
325+
}
326+
327+
.admonition.warning,
328+
.warning,
329+
blockquote.warning,
330+
.blockquote-tag-warning,
331+
.admonition.important,
332+
.important,
333+
blockquote.important {
334+
--admonition-bg: var(--admonition-warning-bg);
335+
--admonition-border: var(--admonition-warning-border);
336+
--admonition-accent: var(--admonition-warning-accent);
337+
--admonition-icon: var(--admonition-icon-warning);
338+
}
339+
340+
.admonition.caution,
341+
.caution,
342+
blockquote.caution,
343+
.blockquote-tag-caution,
344+
.admonition.danger,
345+
.danger,
346+
blockquote.danger {
347+
--admonition-bg: var(--admonition-caution-bg);
348+
--admonition-border: var(--admonition-caution-border);
349+
--admonition-accent: var(--admonition-caution-accent);
350+
--admonition-icon: var(--admonition-icon-caution);
351+
}
352+
353+
.admonition::before,
354+
blockquote.admonition::before,
355+
.note::before,
356+
.tip::before,
357+
.warning::before,
358+
.caution::before,
359+
.important::before,
360+
.info::before,
361+
.success::before,
362+
.danger::before,
363+
blockquote.note::before,
364+
blockquote.tip::before,
365+
blockquote.warning::before,
366+
blockquote.caution::before,
367+
blockquote.important::before,
368+
blockquote.info::before,
369+
blockquote.success::before,
370+
blockquote.danger::before {
371+
content: "";
372+
position: absolute;
373+
top: 14px;
374+
left: 18px;
375+
width: 20px;
376+
height: 20px;
377+
background-color: var(--admonition-accent);
378+
mask: var(--admonition-icon) no-repeat center / contain;
379+
-webkit-mask: var(--admonition-icon) no-repeat center / contain;
254380
}
255381

256-
.warning:before {
257-
position: absolute;
258-
width: 3rem;
259-
height: 3rem;
260-
margin-inline-start: calc(-1.5rem - 21px);
261-
content: "ⓘ";
262-
text-align: center;
263-
background-color: var(--bg);
264-
color: var(--warning-border);
265-
font-weight: bold;
266-
font-size: 2rem;
382+
.admonition-title {
383+
margin: 0 0 8px;
384+
font-weight: 700;
385+
text-transform: uppercase;
386+
letter-spacing: 0.06em;
387+
font-size: 0.8em;
388+
color: var(--admonition-accent);
267389
}
268390

269-
blockquote .warning:before {
270-
background-color: var(--quote-bg);
391+
.blockquote-tag-title {
392+
margin: 0 0 10px;
393+
font-weight: 700;
394+
text-transform: uppercase;
395+
letter-spacing: 0.06em;
396+
font-size: 0.8em;
397+
color: var(--admonition-accent);
398+
display: flex;
399+
align-items: center;
400+
gap: 8px;
401+
}
402+
403+
.blockquote-tag-title svg {
404+
flex: 0 0 auto;
405+
fill: currentColor;
406+
}
407+
408+
.admonition > :last-child,
409+
blockquote.admonition > :last-child,
410+
.blockquote-tag > :last-child,
411+
.note > :last-child,
412+
.tip > :last-child,
413+
.warning > :last-child,
414+
.caution > :last-child,
415+
.important > :last-child,
416+
.info > :last-child,
417+
.success > :last-child,
418+
.danger > :last-child,
419+
blockquote.note > :last-child,
420+
blockquote.tip > :last-child,
421+
blockquote.warning > :last-child,
422+
blockquote.caution > :last-child,
423+
blockquote.important > :last-child,
424+
blockquote.info > :last-child,
425+
blockquote.success > :last-child,
426+
blockquote.danger > :last-child {
427+
margin-bottom: 0;
271428
}
272429

273430
kbd {

0 commit comments

Comments
 (0)