flyonui/components/kbd.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.kbd{border-radius:var(--radius-field);background-color:color-mix(in oklab,var(--color-base-200)20%,transparent);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid color-mix(in oklab,var(--color-base-content)25%,#0000);border-bottom-width:calc(var(--border) + 1px);--size:calc(var(--size-selector,.25rem)*6.5);height:var(--size);min-width:var(--size);justify-content:center;align-items:center;padding-left:.5em;padding-right:.5em;display:inline-flex}.kbd-xs{--size:calc(var(--size-selector,.25rem)*4.5);font-size:.625rem}.kbd-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5.5)}.kbd-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6.5)}.kbd-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7.5)}.kbd-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8.5)}@media (width>=640px){.sm\:kbd{border-radius:var(--radius-field);background-color:color-mix(in oklab,var(--color-base-200)20%,transparent);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid color-mix(in oklab,var(--color-base-content)25%,#0000);border-bottom-width:calc(var(--border) + 1px);--size:calc(var(--size-selector,.25rem)*6.5);height:var(--size);min-width:var(--size);justify-content:center;align-items:center;padding-left:.5em;padding-right:.5em;display:inline-flex}.sm\:kbd-xs{--size:calc(var(--size-selector,.25rem)*4.5);font-size:.625rem}.sm\:kbd-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5.5)}.sm\:kbd-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6.5)}.sm\:kbd-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7.5)}.sm\:kbd-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8.5)}}@media (width>=768px){.md\:kbd{border-radius:var(--radius-field);background-color:color-mix(in oklab,var(--color-base-200)20%,transparent);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid color-mix(in oklab,var(--color-base-content)25%,#0000);border-bottom-width:calc(var(--border) + 1px);--size:calc(var(--size-selector,.25rem)*6.5);height:var(--size);min-width:var(--size);justify-content:center;align-items:center;padding-left:.5em;padding-right:.5em;display:inline-flex}.md\:kbd-xs{--size:calc(var(--size-selector,.25rem)*4.5);font-size:.625rem}.md\:kbd-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5.5)}.md\:kbd-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6.5)}.md\:kbd-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7.5)}.md\:kbd-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8.5)}}@media (width>=1024px){.lg\:kbd{border-radius:var(--radius-field);background-color:color-mix(in oklab,var(--color-base-200)20%,transparent);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid color-mix(in oklab,var(--color-base-content)25%,#0000);border-bottom-width:calc(var(--border) + 1px);--size:calc(var(--size-selector,.25rem)*6.5);height:var(--size);min-width:var(--size);justify-content:center;align-items:center;padding-left:.5em;padding-right:.5em;display:inline-flex}.lg\:kbd-xs{--size:calc(var(--size-selector,.25rem)*4.5);font-size:.625rem}.lg\:kbd-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5.5)}.lg\:kbd-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6.5)}.lg\:kbd-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7.5)}.lg\:kbd-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8.5)}}@media (width>=1280px){.xl\:kbd{border-radius:var(--radius-field);background-color:color-mix(in oklab,var(--color-base-200)20%,transparent);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid color-mix(in oklab,var(--color-base-content)25%,#0000);border-bottom-width:calc(var(--border) + 1px);--size:calc(var(--size-selector,.25rem)*6.5);height:var(--size);min-width:var(--size);justify-content:center;align-items:center;padding-left:.5em;padding-right:.5em;display:inline-flex}.xl\:kbd-xs{--size:calc(var(--size-selector,.25rem)*4.5);font-size:.625rem}.xl\:kbd-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5.5)}.xl\:kbd-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6.5)}.xl\:kbd-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7.5)}.xl\:kbd-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8.5)}}@media (width>=1536px){.\32 xl\:kbd{border-radius:var(--radius-field);background-color:color-mix(in oklab,var(--color-base-200)20%,transparent);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid color-mix(in oklab,var(--color-base-content)25%,#0000);border-bottom-width:calc(var(--border) + 1px);--size:calc(var(--size-selector,.25rem)*6.5);height:var(--size);min-width:var(--size);justify-content:center;align-items:center;padding-left:.5em;padding-right:.5em;display:inline-flex}.\32 xl\:kbd-xs{--size:calc(var(--size-selector,.25rem)*4.5);font-size:.625rem}.\32 xl\:kbd-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5.5)}.\32 xl\:kbd-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6.5)}.\32 xl\:kbd-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7.5)}.\32 xl\:kbd-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8.5)}}}