16d336913f
- "app/src/App.tsx" - "app/src/App.css" - "app/src/views/ImportConvert.tsx" - "app/src/views/ImportConvert.module.css" - "app/src/components/FileUpload.tsx" - "app/src/components/PresetSelector.tsx" GSD-Task: S01/T02
172 lines
2.9 KiB
CSS
172 lines
2.9 KiB
CSS
/* ── Global component styles for Kerf Engine app ── */
|
|
|
|
/* File Upload Zone */
|
|
.file-upload-zone {
|
|
border: 2px dashed var(--border);
|
|
border-radius: 8px;
|
|
padding: 24px 16px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, background-color 0.15s;
|
|
user-select: none;
|
|
}
|
|
|
|
.file-upload-zone:hover,
|
|
.file-upload-zone--drag-over {
|
|
border-color: var(--accent);
|
|
background: var(--accent-bg);
|
|
}
|
|
|
|
.file-upload-zone:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.file-upload-prompt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.file-upload-icon {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.file-upload-prompt p {
|
|
margin: 0;
|
|
color: var(--text-h);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.file-upload-prompt small {
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.file-upload-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.file-upload-thumb {
|
|
width: 56px;
|
|
height: 56px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.file-upload-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 2px;
|
|
text-align: left;
|
|
}
|
|
|
|
.file-upload-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-h);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.file-upload-size {
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.file-upload-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--accent);
|
|
background: var(--accent-bg);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Preset Selector */
|
|
.preset-selector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.preset-heading {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-h);
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.preset-loading,
|
|
.preset-error {
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
margin: 0;
|
|
}
|
|
|
|
.preset-error {
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.preset-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.preset-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 2px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: border-color 0.12s, background-color 0.12s;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.preset-card:hover {
|
|
border-color: var(--accent-border);
|
|
background: var(--accent-bg);
|
|
}
|
|
|
|
.preset-card--selected {
|
|
border-color: var(--accent);
|
|
background: var(--accent-bg);
|
|
box-shadow: 0 0 0 1px var(--accent);
|
|
}
|
|
|
|
.preset-card-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-h);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.preset-card-desc {
|
|
font-size: 12px;
|
|
color: var(--text);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Placeholder views */
|
|
.placeholder-view {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 60vh;
|
|
font-size: 20px;
|
|
color: var(--text);
|
|
}
|