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

update input container layout with grid areas for improved semantic structure and maintainability

Browse Source
This commit is contained in:
fretuks
2026-09-20 20:47:35 +02:00
parent 781f15b503
commit daa754bac4
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/chat.html
+1 -1
View File
@@ -8,7 +8,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="/app/theme-bootstrap.js?v=20260909-account-controls"></script> <script src="/app/theme-bootstrap.js?v=20260909-account-controls"></script>
<link rel="stylesheet" href="/style.css?v=20260909-account-controls"/> <link rel="stylesheet" href="/style.css?v=20260920-web-search-composer"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/pages.css?v=20260909-account-controls"><link rel="stylesheet" href="/shell.css?v=20260909-account-controls"> <link rel="stylesheet" href="/pages.css?v=20260909-account-controls"><link rel="stylesheet" href="/shell.css?v=20260909-account-controls">
</head> </head>
public/style.css
+4 -4
View File
@@ -436,16 +436,16 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
.input-meta, .input-container { width: min(940px, 100%); margin-inline: auto; } .input-meta, .input-container { width: min(940px, 100%); margin-inline: auto; }
.input-meta { margin-bottom: 5px; padding-left: 10px; } .input-meta { margin-bottom: 5px; padding-left: 10px; }
.composer-hint { margin: 0; color: var(--text-muted); font-size: .72rem; } .composer-hint { margin: 0; color: var(--text-muted); font-size: .72rem; }
.input-container { padding: 7px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); } .input-container { padding: 7px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "search message send"; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); }
#webSearch { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 17px; } #webSearch { grid-area: search; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 17px; }
#webSearch[aria-pressed="true"] { color: var(--brand-strong); background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } #webSearch[aria-pressed="true"] { color: var(--brand-strong); background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.msg-sources { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; font-size: .8rem; } .msg-sources { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; font-size: .8rem; }
.msg-sources-heading { color: var(--text-muted); margin-bottom: 6px; } .msg-sources-heading { color: var(--text-muted); margin-bottom: 6px; }
.msg-source { display: flex; min-width: 0; flex-direction: column; gap: 2px; margin-top: 6px; } .msg-source { display: flex; min-width: 0; flex-direction: column; gap: 2px; margin-top: 6px; }
.msg-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-source small { color: var(--text-muted); } .msg-source small { color: var(--text-muted); }
#msgInput { min-height: 44px; max-height: 160px; padding: 11px 13px; resize: none; background: transparent; border: 0; box-shadow: none; } #msgInput { grid-area: message; min-height: 44px; max-height: 160px; padding: 11px 13px; resize: none; background: transparent; border: 0; box-shadow: none; }
#send { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 17px; } #send { grid-area: send; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 17px; }
#send::after { content: "\2191"; font-size: 1.1rem; font-weight: 800; } #send::after { content: "\2191"; font-size: 1.1rem; font-weight: 800; }
#send.loading::after { content: "■"; font-size: .85rem; } #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 { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }