Fretux/KrisHD_AI
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

make some overall QoL improvements

Browse Source
This commit is contained in:
Frederik Spirgi
2026-09-30 10:06:29 +02:00
parent 7a1b152f20
commit d15f7867d5
9 changed files with 239 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+14 -2
View File
@@ -363,7 +363,11 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
}
.chat-item:hover { background: var(--surface-hover); }
.chat-item.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.chat-item-copy { min-width: 0; display: grid; gap: 2px; }
.chat-item-copy { min-width: 0; width: 100%; padding: 0; display: grid; gap: 2px; justify-items: start; color: inherit; background: transparent; border: 0; text-align: left; font: inherit; }
.chat-item-copy:hover:not(:disabled) { background: transparent; }
.chat-item-copy > span, .chat-item-excerpt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-excerpt { color: var(--text-soft); font-size: .73rem; }
.chat-item:focus-within { border-color: var(--brand); }
.chat-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-meta { color: var(--text-muted); font-size: .75rem; }
.chat-item-delete { min-height: 30px; padding: 5px 8px; color: var(--text-muted); background: transparent; border: 0; font-size: .72rem; }
@@ -394,11 +398,14 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.chat-header-actions { display: flex; align-items: center; }
.overflow-trigger { min-height: 38px; padding: 8px 12px; border-radius: 999px; font-size: .8rem; }
.messages-wrap { min-height: 0; position: relative; }
.messages-panel {
height: 100%;
min-height: 0;
padding: 28px max(16px, calc((100% - 940px) / 2));
display: flex; flex-direction: column; gap: 38px; overflow-y: auto;
}
.jump-to-latest { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); box-shadow: var(--shadow-md); white-space: nowrap; }
.messages-empty {
width: min(680px, 100%); margin: auto; padding: clamp(24px, 5vw, 44px);
text-align: center; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
@@ -475,7 +482,10 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.message-images img { max-width: min(360px, 100%); max-height: 300px; object-fit: contain; border-radius: 12px; }
.message-images a { max-width: 100%; }
.image-drag-target { outline: 2px solid currentColor; }
@media (max-width: 480px) { .input-container { grid-template-columns: 36px 36px 36px minmax(0, 1fr) 36px; gap: 3px; } }
@media (max-width: 480px) {
.input-container { grid-template-columns: repeat(3, 36px) minmax(0, 1fr) 44px; grid-template-areas: "message message message message send" "attach search reasoning . ."; gap: 4px; }
#attachImage, #webSearch, #reasoning { width: 36px; height: 36px; min-height: 36px; border-radius: 12px; }
}
#webSearch, #reasoning { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 17px; }
#webSearch { grid-area: search; }
#reasoning { grid-area: reasoning; }
@@ -491,6 +501,8 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
#send.loading::after { content: "■"; font-size: .85rem; }
.generation-settings-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.generation-settings-grid .field-wide, .generation-settings-grid button { grid-column: 1 / -1; }
.generation-advanced { margin-top: 6px; border-top: 1px solid var(--border); }
.generation-advanced summary { padding: 10px 0; color: var(--text-soft); cursor: pointer; font-size: .8rem; }
/* ---------- Chat settings drawer ---------- */
.chat-drawer {