mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-08-05 23:00:10 +00:00
288 lines
6.6 KiB
CSS
288 lines
6.6 KiB
CSS
.muted {
|
|
@apply m-0 mb-4 text-center text-muted;
|
|
font-size: var(--font-sm);
|
|
line-height: var(--leading-relaxed);
|
|
letter-spacing: var(--tracking-normal);
|
|
}
|
|
|
|
.field {
|
|
@apply mb-4 block;
|
|
}
|
|
|
|
.field > span {
|
|
@apply mb-2 block;
|
|
font-size: var(--font-sm);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-wide);
|
|
color: var(--muted-strong);
|
|
line-height: var(--leading-snug);
|
|
}
|
|
|
|
.input {
|
|
@apply h-12 w-full rounded-xl border px-3.5 py-2.5 outline-none;
|
|
background: var(--panel);
|
|
border-color: rgba(74, 103, 150, 0.34);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
|
|
transition: all var(--dur-fast) var(--ease-smooth);
|
|
font-size: var(--font-base);
|
|
line-height: var(--leading-snug);
|
|
letter-spacing: var(--tracking-normal);
|
|
color: var(--text);
|
|
}
|
|
|
|
select.input {
|
|
@apply py-0 pr-3.5;
|
|
line-height: 1.5;
|
|
appearance: auto;
|
|
-webkit-appearance: auto;
|
|
-moz-appearance: auto;
|
|
background-image: none;
|
|
}
|
|
|
|
input[type='file'].input {
|
|
@apply h-auto min-h-12 px-2.5 py-2 text-sm leading-[1.4];
|
|
}
|
|
|
|
input[type='file'].input::file-selector-button {
|
|
@apply mr-2.5 h-8 cursor-pointer rounded-full border px-3 font-bold;
|
|
background: #eef4ff;
|
|
border-color: #9db8ea;
|
|
color: #1f4ea0;
|
|
}
|
|
|
|
input[type='file'].input::file-selector-button:hover {
|
|
background: #dfeaff;
|
|
border-color: #2f5fd8;
|
|
}
|
|
|
|
.textarea {
|
|
@apply h-auto min-h-28 resize-y;
|
|
}
|
|
|
|
.input:focus {
|
|
border-color: var(--primary);
|
|
background-color: #fbfdff;
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 8px 20px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.input-readonly {
|
|
@apply bg-slate-100 text-slate-600;
|
|
}
|
|
|
|
.input:disabled {
|
|
@apply cursor-not-allowed border-slate-300 bg-slate-200 text-slate-400;
|
|
}
|
|
|
|
.password-wrap {
|
|
@apply relative;
|
|
}
|
|
|
|
.password-wrap .input {
|
|
@apply pr-11;
|
|
}
|
|
|
|
.input-action-wrap {
|
|
@apply relative;
|
|
}
|
|
|
|
.input-action-wrap .input {
|
|
@apply pr-12;
|
|
}
|
|
|
|
.input-icon-btn {
|
|
@apply absolute right-2 top-1/2 grid h-8 w-8 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-slate-700 transition;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.input-icon-btn:hover:not(:disabled) {
|
|
color: var(--primary);
|
|
background: rgba(37, 99, 235, 0.08);
|
|
transform: translateY(-50%) scale(1.04);
|
|
}
|
|
|
|
.input-icon-btn:disabled {
|
|
@apply cursor-not-allowed text-slate-400;
|
|
}
|
|
|
|
.password-toggle {
|
|
@apply absolute right-2 top-1/2 grid cursor-pointer place-items-center border-0 bg-transparent text-blue-700 transition;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.eye-btn {
|
|
@apply absolute right-2.5 top-1/2 grid h-8 w-8 cursor-pointer place-items-center border-0 bg-transparent text-slate-700 transition;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.password-toggle:hover,
|
|
.eye-btn:hover {
|
|
color: var(--primary);
|
|
transform: translateY(-50%) scale(1.04);
|
|
}
|
|
|
|
.btn {
|
|
@apply inline-flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-full border border-transparent px-4 no-underline;
|
|
font-size: var(--font-sm);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-wide);
|
|
line-height: 1;
|
|
transition: all var(--dur-fast) var(--ease-smooth);
|
|
}
|
|
|
|
.topbar-actions .btn,
|
|
.user-chip,
|
|
.side-link,
|
|
.mobile-tab {
|
|
@apply relative overflow-hidden;
|
|
}
|
|
|
|
.topbar-actions .btn::before,
|
|
.user-chip::before,
|
|
.side-link::before,
|
|
.mobile-tab::before {
|
|
content: '';
|
|
@apply absolute left-1/2 top-1/2 h-[110px] w-[110px] rounded-full opacity-0;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 42%, transparent 72%);
|
|
transform: translate(-50%, -50%) scale(0.68);
|
|
pointer-events: none;
|
|
transition:
|
|
opacity var(--dur-fast) var(--ease-smooth),
|
|
transform var(--dur-medium) var(--ease-out-soft);
|
|
}
|
|
|
|
.topbar-actions .btn:hover::before,
|
|
.user-chip:hover::before,
|
|
.side-link:hover::before,
|
|
.mobile-tab:hover::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
transition-duration: var(--dur-quick);
|
|
}
|
|
|
|
.btn:active:not(:disabled) {
|
|
transform: translateY(0) scale(0.97);
|
|
transition-duration: var(--dur-instant);
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply shrink-0;
|
|
}
|
|
|
|
.btn-icon-spin {
|
|
animation: spin 0.9s linear infinite;
|
|
}
|
|
|
|
.btn.full {
|
|
@apply my-2.5 h-12 w-full;
|
|
font-size: var(--font-md);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply text-white;
|
|
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
|
|
border: 1px solid rgba(37, 99, 235, 0.4);
|
|
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
|
|
opacity: 0;
|
|
transition: opacity var(--dur-fast) var(--ease-smooth);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
|
|
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-primary:active:not(:disabled) {
|
|
transform: translateY(0) scale(0.98);
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-panel text-brand-strong;
|
|
border: 1px solid rgba(37, 99, 235, 0.22);
|
|
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border-color: rgba(37, 99, 235, 0.40);
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-white/80 text-danger;
|
|
border-color: rgba(217, 45, 87, 0.28);
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: rgba(255, 241, 242, 0.96);
|
|
border-color: rgba(217, 45, 87, 0.38);
|
|
}
|
|
|
|
.btn:disabled {
|
|
@apply cursor-not-allowed border-slate-300 bg-slate-200 text-slate-400;
|
|
}
|
|
|
|
.or {
|
|
@apply text-center;
|
|
font-size: var(--font-sm);
|
|
color: var(--muted);
|
|
line-height: var(--leading-snug);
|
|
letter-spacing: var(--tracking-wide);
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.field-help {
|
|
@apply mt-2;
|
|
font-size: var(--font-xs);
|
|
line-height: var(--leading-relaxed);
|
|
letter-spacing: var(--tracking-normal);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.check-line-compact {
|
|
@apply mb-0;
|
|
}
|
|
|
|
.auth-support-row {
|
|
@apply -mt-0.5 mb-3 flex items-center justify-between gap-2.5;
|
|
}
|
|
|
|
.auth-link-btn {
|
|
@apply cursor-pointer border-0 bg-transparent p-0 transition;
|
|
font-size: var(--font-xs);
|
|
font-weight: 600;
|
|
letter-spacing: var(--tracking-wide);
|
|
color: var(--primary-strong);
|
|
line-height: var(--leading-snug);
|
|
}
|
|
|
|
.auth-link-btn:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.auth-link-btn:disabled {
|
|
@apply cursor-not-allowed no-underline;
|
|
color: var(--muted);
|
|
}
|