vue-csv-processor/dist/style.css

Vue 3 component library for CSV file processing with encoding detection and preview

.vue-csv-processor[data-v-67071360]{width:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.vue-csv-input[data-v-218ab60c]{margin-bottom:1rem}.file-drop-area[data-v-218ab60c]{position:relative;padding:2rem;border:2px dashed #ccc;border-radius:.5rem;text-align:center;cursor:pointer;transition:all .2s ease;margin-bottom:.5rem}.file-drop-area[data-v-218ab60c]:hover{border-color:#aaa;background-color:#f9f9f9}.file-drop-active[data-v-218ab60c]{border-color:#4299e1;background-color:#ebf8ff}.has-file[data-v-218ab60c]{border-color:#48bb78;background-color:#f0fff4}.file-input[data-v-218ab60c]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-content[data-v-218ab60c]{display:flex;flex-direction:column;align-items:center;justify-content:center}.file-placeholder[data-v-218ab60c]{display:flex;flex-direction:column;align-items:center;color:#666}.file-icon[data-v-218ab60c]{width:3rem;height:3rem;margin-bottom:.5rem}.file-icon svg[data-v-218ab60c]{width:100%;height:100%;fill:#666}.file-info[data-v-218ab60c]{display:flex;align-items:center;font-size:.875rem}.file-name[data-v-218ab60c]{font-weight:600;margin-right:.25rem}.file-size[data-v-218ab60c]{color:#666}.remove-file[data-v-218ab60c]{margin-left:.5rem;background:none;border:none;color:#666;cursor:pointer;padding:.25rem;border-radius:9999px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.remove-file[data-v-218ab60c]:hover{background-color:#f2f2f2;color:#e53e3e}.file-errors[data-v-218ab60c]{margin-top:.5rem}.error-message[data-v-218ab60c]{color:#e53e3e;font-size:.875rem;margin:.25rem 0}.vue-csv-preview[data-v-f1c12314]{margin-bottom:1.5rem}.preview-empty[data-v-f1c12314]{background-color:#f9f9f9;padding:2rem;text-align:center;border-radius:.375rem;color:#666;border:1px dashed #ddd}.preview-container[data-v-f1c12314]{border:1px solid #e2e8f0;border-radius:.375rem;overflow:hidden}.encoding-selector[data-v-f1c12314]{display:flex;align-items:center;padding:.75rem 1rem;background-color:#f8fafc;border-bottom:1px solid #e2e8f0}.encoding-label[data-v-f1c12314]{font-weight:500;margin-right:.5rem;color:#4a5568}.encoding-select[data-v-f1c12314]{padding:.375rem .75rem;border:1px solid #cbd5e0;border-radius:.25rem;background-color:#fff;color:#2d3748;font-size:.875rem;line-height:1.25rem;min-width:12rem}.preview-table-wrapper[data-v-f1c12314]{overflow-x:auto;max-height:400px;overflow-y:auto}.preview-table[data-v-f1c12314]{width:100%;border-collapse:collapse;font-size:.875rem}.row-number-cell[data-v-f1c12314]{width:2rem;text-align:center;color:#a0aec0;font-weight:400;background-color:#f8fafc;border-right:1px solid #e2e8f0}.header-cell[data-v-f1c12314]{padding:.75rem 1rem;text-align:left;font-weight:600;color:#4a5568;background-color:#f8fafc;border-bottom:2px solid #e2e8f0;position:sticky;top:0;z-index:10}.data-row[data-v-f1c12314]:nth-child(2n){background-color:#f8fafc}.data-cell[data-v-f1c12314]{padding:.5rem 1rem;border-bottom:1px solid #e2e8f0;color:#2d3748;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.encoding-issue[data-v-f1c12314]{background-color:#fff5f5;color:#c53030}.preview-controls[data-v-f1c12314]{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#f8fafc;border-top:1px solid #e2e8f0}.preview-info[data-v-f1c12314]{font-size:.875rem;color:#4a5568}.preview-buttons[data-v-f1c12314]{display:flex;gap:.5rem}.preview-button[data-v-f1c12314]{padding:.25rem .75rem;background-color:#fff;border:1px solid #cbd5e0;border-radius:.25rem;font-size:.75rem;cursor:pointer;color:#4a5568}.preview-button[data-v-f1c12314]:hover:not(:disabled){background-color:#edf2f7}.preview-button[data-v-f1c12314]:disabled{opacity:.5;cursor:not-allowed}.encoding-note[data-v-f1c12314]{display:flex;align-items:center;padding:.75rem 1rem;background-color:#fffbea;border-top:1px solid #fbd38d;font-size:.875rem;color:#744210}.warning-icon[data-v-f1c12314]{fill:#d69e2e;margin-right:.5rem;flex-shrink:0}.vue-csv-toggle-headers[data-v-bcaca94b]{margin-bottom:1rem}.toggle-container[data-v-bcaca94b]{display:flex;align-items:center}.toggle-checkbox[data-v-bcaca94b]{margin-right:.5rem;cursor:pointer}.toggle-label[data-v-bcaca94b]{cursor:pointer;-webkit-user-select:none;user-select:none;color:#2d3748;font-size:.875rem}.vue-csv-map[data-v-48273534]{margin-bottom:1.5rem}.map-empty[data-v-48273534]{background-color:#f9f9f9;padding:2rem;text-align:center;border-radius:.375rem;color:#666;border:1px dashed #ddd}.mapping-table[data-v-48273534]{width:100%;border-collapse:collapse;border:1px solid #e2e8f0;border-radius:.375rem;overflow:hidden;background-color:#fff}.mapping-table thead th[data-v-48273534]{padding:.75rem 1rem;text-align:left;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;font-weight:600;color:#4a5568}.field-column[data-v-48273534]{width:40%;padding:.75rem 1rem;border-bottom:1px solid #e2e8f0;vertical-align:middle}.csv-column[data-v-48273534]{width:60%;padding:.75rem 1rem;border-bottom:1px solid #e2e8f0;vertical-align:middle}.field-info[data-v-48273534]{display:flex;align-items:center}.field-name[data-v-48273534]{font-weight:500;color:#2d3748}.required-indicator[data-v-48273534]{color:#e53e3e;margin-left:.25rem;font-weight:700}.mapping-select[data-v-48273534]{width:100%;padding:.5rem;border:1px solid #cbd5e0;border-radius:.25rem;background-color:#fff;color:#2d3748;font-size:.875rem}.required-reminder[data-v-48273534]{margin-top:.5rem;font-size:.875rem;color:#e53e3e}.no-thead tr:first-child td[data-v-48273534]{border-top:none}.vue-csv-errors[data-v-3335c9f9]{margin-bottom:1.5rem}.errors-container[data-v-3335c9f9]{background-color:#fff5f5;border:1px solid #fed7d7;border-radius:.375rem;overflow:hidden}.errors-header[data-v-3335c9f9]{display:flex;align-items:center;padding:.75rem 1rem;background-color:#feb2b2;color:#c53030;font-weight:600}.error-icon[data-v-3335c9f9]{fill:#c53030;margin-right:.5rem}.errors-list[data-v-3335c9f9]{list-style:none;margin:0;padding:.5rem 0}.error-item[data-v-3335c9f9]{padding:.5rem 1rem;color:#c53030;font-size:.875rem;border-bottom:1px solid #fed7d7}.error-item[data-v-3335c9f9]:last-child{border-bottom:none}