flyonui/components/fileinput.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.input::file-selector-button{cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-primary);text-align:center;height:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-primary-content);text-transform:uppercase;-webkit-user-select:none;user-select:none;--input-color:var(--color-primary);border-width:0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:1rem;padding-inline:1rem;text-decoration-line:none;display:inline-flex;&.input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&.input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&.input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&.input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.input-xs::file-selector-button{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.input-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.input-md::file-selector-button{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.input-lg::file-selector-button{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.input-xl::file-selector-button{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.input[type=file]{padding-inline-start:0;overflow:hidden}.input-floating .input::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid color-mix(in oklab,var(--color-base-content)40%,#0000);outline:none}@media (width>=640px){.sm\:input::file-selector-button{cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-primary);text-align:center;height:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-primary-content);text-transform:uppercase;-webkit-user-select:none;user-select:none;--input-color:var(--color-primary);border-width:0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:1rem;padding-inline:1rem;text-decoration-line:none;display:inline-flex;&.input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&.input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&.input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&.input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.sm\:input-xs::file-selector-button{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.sm\:input-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:input-md::file-selector-button{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:input-lg::file-selector-button{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:input-xl::file-selector-button{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.sm\:input[type=file]{padding-inline-start:0;overflow:hidden}.sm\:input-floating .input::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid color-mix(in oklab,var(--color-base-content)40%,#0000);outline:none}}@media (width>=768px){.md\:input::file-selector-button{cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-primary);text-align:center;height:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-primary-content);text-transform:uppercase;-webkit-user-select:none;user-select:none;--input-color:var(--color-primary);border-width:0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:1rem;padding-inline:1rem;text-decoration-line:none;display:inline-flex;&.input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&.input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&.input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&.input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.md\:input-xs::file-selector-button{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.md\:input-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.md\:input-md::file-selector-button{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:input-lg::file-selector-button{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.md\:input-xl::file-selector-button{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.md\:input[type=file]{padding-inline-start:0;overflow:hidden}.md\:input-floating .input::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid color-mix(in oklab,var(--color-base-content)40%,#0000);outline:none}}@media (width>=1024px){.lg\:input::file-selector-button{cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-primary);text-align:center;height:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-primary-content);text-transform:uppercase;-webkit-user-select:none;user-select:none;--input-color:var(--color-primary);border-width:0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:1rem;padding-inline:1rem;text-decoration-line:none;display:inline-flex;&.input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&.input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&.input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&.input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.lg\:input-xs::file-selector-button{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.lg\:input-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.lg\:input-md::file-selector-button{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.lg\:input-lg::file-selector-button{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.lg\:input-xl::file-selector-button{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.lg\:input[type=file]{padding-inline-start:0;overflow:hidden}.lg\:input-floating .input::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid color-mix(in oklab,var(--color-base-content)40%,#0000);outline:none}}@media (width>=1280px){.xl\:input::file-selector-button{cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-primary);text-align:center;height:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-primary-content);text-transform:uppercase;-webkit-user-select:none;user-select:none;--input-color:var(--color-primary);border-width:0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:1rem;padding-inline:1rem;text-decoration-line:none;display:inline-flex;&.input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&.input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&.input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&.input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.xl\:input-xs::file-selector-button{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.xl\:input-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.xl\:input-md::file-selector-button{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.xl\:input-lg::file-selector-button{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.xl\:input-xl::file-selector-button{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.xl\:input[type=file]{padding-inline-start:0;overflow:hidden}.xl\:input-floating .input::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid color-mix(in oklab,var(--color-base-content)40%,#0000);outline:none}}@media (width>=1536px){.\32 xl\:input::file-selector-button{cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-primary);text-align:center;height:100%;font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-semibold);line-height:1;font-weight:var(--font-weight-semibold);color:var(--color-primary-content);text-transform:uppercase;-webkit-user-select:none;user-select:none;--input-color:var(--color-primary);border-width:0;flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:1rem;padding-inline:1rem;text-decoration-line:none;display:inline-flex;&.input-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&.input-md{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&.input-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&.input-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}.\32 xl\:input-xs::file-selector-button{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\32 xl\:input-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\32 xl\:input-md::file-selector-button{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\32 xl\:input-lg::file-selector-button{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.\32 xl\:input-xl::file-selector-button{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.\32 xl\:input[type=file]{padding-inline-start:0;overflow:hidden}.\32 xl\:input-floating .input::file-selector-button{background-color:var(--color-base-100);color:var(--color-base-content);border-inline-end:var(--border)solid color-mix(in oklab,var(--color-base-content)40%,#0000);outline:none}}}