TySS-Dev/ollama-ai-answers-searxng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing a animation around the input box

Browse Source
This commit is contained in:
tyler
2026-05-19 02:43:27 -04:00
parent 1702d9cd20
commit baec4522cf
1 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ollama_answers.py
+38 -35
View File
@@ -297,32 +297,56 @@ INTERACTIVE_CSS = '''
margin: 0 0.5rem;
position: relative;
border-radius: 4px;
overflow: hidden;
padding: 1px;
background: var(--color-result-border, rgba(0,0,0,0.15));
}
.sxng-input-wrapper::before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: conic-gradient(
transparent 0deg,
transparent 270deg,
var(--color-result-link, #4a9eff) 300deg,
transparent 360deg
);
opacity: 0;
transition: opacity 0.3s ease;
animation: sxng-border-rotate 2s linear infinite;
animation-play-state: paused;
}
.sxng-input-wrapper:focus-within {
background: transparent;
}
.sxng-input-wrapper:focus-within::before {
opacity: 1;
animation-play-state: running;
}
@keyframes sxng-border-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.sxng-input {
position: relative;
z-index: 1;
width: 100%;
height: -webkit-fill-available;
background: var(--color-base-background-hover, rgba(0,0,0,0.06));
border: 1px solid var(--color-result-border, rgba(0,0,0,0.15));
height: 100%;
background: var(--color-base-background, #1e1e2e);
border: none;
color: var(--color-base-font, inherit);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 0.78em;
padding: 3px 8px;
border-radius: 4px;
border-radius: 3px;
line-height: 1.4;
vertical-align: middle;
}
.sxng-input:focus { outline: none; }
.sxng-input::placeholder { color: var(--color-base-font, inherit); opacity: 0.4; }
.sxng-input-line {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--color-result-link, #5e81ac);
transition: width 0.3s ease;
}
.sxng-input:focus + .sxng-input-line { width: 100%; }
.sxng-user-msg {
display: block;
width: fit-content;
@@ -336,27 +360,6 @@ INTERACTIVE_CSS = '''
opacity: 0.55;
animation: sxng-fade-in-up 0.3s ease-out forwards;
}
.sxng-input-wrapper:focus-within {
opacity: 1;
color: var(--color-result-link, #5e81ac);
background: var(--color-base-background-hover, rgba(0,0,0,0.05)) !important;
}
@keyframes sxng-input-glow {
0% {
box-shadow: 0 0 0 0px var(--color-result-link, #4a9eff);
}
50% {
box-shadow: 0 0 6px 2px var(--color-result-link, #4a9eff);
}
100% {
box-shadow: 0 0 0 0px var(--color-result-link, #4a9eff);
}
}
.sxng-input:focus {
outline: none;
border-color: var(--color-result-link, #4a9eff);
animation: sxng-input-glow 2s ease-in-out infinite;
}
.sxng-model-select {
appearance: none;
-webkit-appearance: none;