72 lines
1.9 KiB
CSS
72 lines
1.9 KiB
CSS
|
@layer base {
|
||
|
|
.input {
|
||
|
|
font-family: var(--font-family-base);
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
color: var(--foreground);
|
||
|
|
background-color: #101217;
|
||
|
|
border: 1px solid #303641;
|
||
|
|
border-radius: 3px;
|
||
|
|
padding: var(--spacing-2) var(--spacing-3);
|
||
|
|
width: 100%;
|
||
|
|
transition:
|
||
|
|
border-color var(--animation-duration-normal) ease,
|
||
|
|
background-color var(--animation-duration-normal) ease,
|
||
|
|
box-shadow var(--animation-duration-normal) ease,
|
||
|
|
transform var(--animation-duration-fast) ease;
|
||
|
|
outline: none;
|
||
|
|
height: 2.5rem;
|
||
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
|
||
|
|
}
|
||
|
|
|
||
|
|
.input::placeholder {
|
||
|
|
color: var(--muted-foreground);
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:hover {
|
||
|
|
border-color: #46505c;
|
||
|
|
background-color: #12151a;
|
||
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:focus {
|
||
|
|
border-color: var(--primary);
|
||
|
|
box-shadow:
|
||
|
|
0 0 0 2px rgba(23,234,242,.1),
|
||
|
|
0 0 18px rgba(23,234,242,.06);
|
||
|
|
background-color: #12151a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:disabled {
|
||
|
|
background-color: var(--muted);
|
||
|
|
color: var(--muted-foreground);
|
||
|
|
cursor: not-allowed;
|
||
|
|
opacity: 0.75;
|
||
|
|
box-shadow: none;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
:global(.dark) .input {
|
||
|
|
background-color: color-mix(in srgb, var(--background) 80%, black);
|
||
|
|
box-shadow:
|
||
|
|
inset 0 1px 2px rgba(0, 0, 0, 0.1),
|
||
|
|
0 1px 0 rgba(255, 255, 255, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
:global(.dark) .input:hover {
|
||
|
|
background-color: color-mix(in srgb, var(--background) 75%, black);
|
||
|
|
border-color: color-mix(in srgb, var(--primary) 90%, white);
|
||
|
|
box-shadow:
|
||
|
|
inset 0 1px 2px rgba(0, 0, 0, 0.1),
|
||
|
|
0 2px 4px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
:global(.dark) .input:focus {
|
||
|
|
background-color: color-mix(in srgb, var(--background) 80%, black);
|
||
|
|
box-shadow:
|
||
|
|
0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent),
|
||
|
|
0 2px 4px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
}
|