Fixed mayber #3
+38
-35
@@ -297,32 +297,56 @@ INTERACTIVE_CSS = '''
|
|||||||
margin: 0 0.5rem;
|
margin: 0 0.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 4px;
|
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 {
|
.sxng-input {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: -webkit-fill-available;
|
height: 100%;
|
||||||
background: var(--color-base-background-hover, rgba(0,0,0,0.06));
|
background: var(--color-base-background, #1e1e2e);
|
||||||
border: 1px solid var(--color-result-border, rgba(0,0,0,0.15));
|
border: none;
|
||||||
color: var(--color-base-font, inherit);
|
color: var(--color-base-font, inherit);
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
font-size: 0.78em;
|
font-size: 0.78em;
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
border-radius: 4px;
|
border-radius: 3px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.sxng-input:focus { outline: none; }
|
.sxng-input:focus { outline: none; }
|
||||||
.sxng-input::placeholder { color: var(--color-base-font, inherit); opacity: 0.4; }
|
.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 {
|
.sxng-user-msg {
|
||||||
display: block;
|
display: block;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
@@ -336,27 +360,6 @@ INTERACTIVE_CSS = '''
|
|||||||
opacity: 0.55;
|
opacity: 0.55;
|
||||||
animation: sxng-fade-in-up 0.3s ease-out forwards;
|
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 {
|
.sxng-model-select {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user