daisyui/components/kbd.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{.kbd{box-shadow:none;@layer daisyui.l1.l2.l3{border-radius:var(--radius-field);background-color:var(--color-base-200);vertical-align:middle;color:var(--color-base-content);border:var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);border-bottom:calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);--size:calc(var(--size-selector,.25rem) * 6);height:var(--size);min-width:var(--size);flex-shrink:0;justify-content:center;align-items:center;padding-inline:.5em;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.kbd-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.kbd-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.kbd-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.kbd-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.kbd-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}@media (width>=640px){.sm\:kbd{box-shadow:none;@layer daisyui.l1.l2.l3{border-radius:var(--radius-field);background-color:var(--color-base-200);vertical-align:middle;color:var(--color-base-content);border:var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);border-bottom:calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);--size:calc(var(--size-selector,.25rem) * 6);height:var(--size);min-width:var(--size);flex-shrink:0;justify-content:center;align-items:center;padding-inline:.5em;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.sm\:kbd-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.sm\:kbd-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.sm\:kbd-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.sm\:kbd-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.sm\:kbd-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=768px){.md\:kbd{box-shadow:none;@layer daisyui.l1.l2.l3{border-radius:var(--radius-field);background-color:var(--color-base-200);vertical-align:middle;color:var(--color-base-content);border:var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);border-bottom:calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);--size:calc(var(--size-selector,.25rem) * 6);height:var(--size);min-width:var(--size);flex-shrink:0;justify-content:center;align-items:center;padding-inline:.5em;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.md\:kbd-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.md\:kbd-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.md\:kbd-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.md\:kbd-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.md\:kbd-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=1024px){.lg\:kbd{box-shadow:none;@layer daisyui.l1.l2.l3{border-radius:var(--radius-field);background-color:var(--color-base-200);vertical-align:middle;color:var(--color-base-content);border:var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);border-bottom:calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);--size:calc(var(--size-selector,.25rem) * 6);height:var(--size);min-width:var(--size);flex-shrink:0;justify-content:center;align-items:center;padding-inline:.5em;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.lg\:kbd-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.lg\:kbd-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.lg\:kbd-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.lg\:kbd-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.lg\:kbd-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=1280px){.xl\:kbd{box-shadow:none;@layer daisyui.l1.l2.l3{border-radius:var(--radius-field);background-color:var(--color-base-200);vertical-align:middle;color:var(--color-base-content);border:var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);border-bottom:calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);--size:calc(var(--size-selector,.25rem) * 6);height:var(--size);min-width:var(--size);flex-shrink:0;justify-content:center;align-items:center;padding-inline:.5em;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.xl\:kbd-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.xl\:kbd-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.xl\:kbd-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.xl\:kbd-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.xl\:kbd-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}@media (width>=1536px){.\32 xl\:kbd{box-shadow:none;@layer daisyui.l1.l2.l3{border-radius:var(--radius-field);background-color:var(--color-base-200);vertical-align:middle;color:var(--color-base-content);border:var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);border-bottom:calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);--size:calc(var(--size-selector,.25rem) * 6);height:var(--size);min-width:var(--size);flex-shrink:0;justify-content:center;align-items:center;padding-inline:.5em;font-size:.875rem;display:inline-flex}}@layer daisyui.l1.l2{.\32 xl\:kbd-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.\32 xl\:kbd-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.\32 xl\:kbd-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.\32 xl\:kbd-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.\32 xl\:kbd-xl{--size:calc(var(--size-selector,.25rem) * 8);font-size:1.125rem}}}}