Kronecker/NotesAgentic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

fix(frontend): 统一原生表单控件样式

Browse Source
This commit is contained in:
admin
2026-09-05 09:57:33 +08:00
parent 311f953855
commit d15ceafbe0
5 changed files with 150 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/features.css
+40
View File
@@ -85,6 +85,44 @@ button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; transform
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px var(--color-accent-soft); background: var(--color-surface-primary); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); }
input[type='checkbox'], input[type='radio'] {
appearance: none;
display: inline-grid;
place-content: center;
width: 18px;
height: 18px;
flex: 0 0 18px;
border: 1px solid var(--color-border-default);
background: var(--color-background-primary);
transition: border-color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast);
}
input[type='checkbox'] { border-radius: 5px; }
input[type='radio'] { border-radius: 50%; }
input[type='checkbox']::before, input[type='radio']::before { content: ''; width: 10px; height: 10px; transform: scale(0); transition: transform var(--motion-fast); }
input[type='checkbox']::before { clip-path: polygon(14% 44%, 0 59%, 39% 96%, 100% 20%, 84% 7%, 37% 68%); background: var(--color-text-inverse); }
input[type='radio']::before { border-radius: 50%; background: var(--color-text-inverse); }
input[type='checkbox']:hover, input[type='radio']:hover { border-color: var(--color-accent-primary); }
input[type='checkbox']:checked, input[type='radio']:checked { border-color: var(--color-accent-primary); background: var(--color-accent-primary); }
input[type='checkbox']:checked::before, input[type='radio']:checked::before { transform: scale(1); }
input[type='checkbox']:disabled, input[type='radio']:disabled { cursor: not-allowed; opacity: .55; }
input[type='range'] { appearance: none; height: 20px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 5px; border-radius: var(--radius-full); background: var(--color-background-tertiary); }
input[type='range']::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border: 2px solid var(--color-surface-primary); border-radius: 50%; background: var(--color-accent-primary); box-shadow: 0 1px 4px color-mix(in srgb, var(--color-text-primary) 24%, transparent); }
progress { appearance: none; width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--radius-full); background: var(--color-background-tertiary); }
progress::-webkit-progress-bar { border-radius: var(--radius-full); background: var(--color-background-tertiary); }
progress::-webkit-progress-value { border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary)); }
progress:not([value]) { background: linear-gradient(90deg, var(--color-background-tertiary) 25%, var(--color-accent-secondary) 50%, var(--color-background-tertiary) 75%); background-size: 200% 100%; animation: progress-pulse 1.2s linear infinite; }
.ui-disclosure { padding: var(--space-md); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-background-secondary); }
.ui-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); list-style: none; color: var(--color-text-secondary); font-weight: 600; cursor: pointer; }
.ui-disclosure > summary::-webkit-details-marker { display: none; }
.ui-disclosure > summary::after { content: ''; width: 8px; height: 8px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--motion-fast); }
.ui-disclosure[open] > summary::after { transform: rotate(225deg); }
.ui-disclosure[open] > summary { margin-bottom: var(--space-md); color: var(--color-text-primary); }
.ui-disclosure > :not(summary) + :not(summary) { margin-top: var(--space-sm); }
.badge {
display: inline-flex;
align-items: center;
@@ -143,6 +181,8 @@ button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; transform
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes progress-pulse { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 900px) {
.feature-page { padding: var(--space-lg); }
.split-view { grid-template-columns: 1fr; }