daisyui/components/dock.css

daisyUI 5 - The Tailwind CSS Component Library

/*! 🌼 daisyUI 5.7.17 - MIT License */ @layer utilities{@layer daisyui.l1.l2.l3{.dock{z-index:1;background-color:var(--color-base-100);color:currentColor;border-top:.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);width:100%;height:4rem;height:calc(4rem + env(safe-area-inset-bottom));padding:.5rem;padding-bottom:env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.dock>*{cursor:pointer;border-radius:var(--radius-box);background-color:#0000;flex-direction:column;flex-shrink:1;flex-basis:100%;justify-content:center;align-items:center;gap:1px;max-width:8rem;height:100%;margin-bottom:.5rem;transition:opacity .2s ease-out;display:flex;position:relative;@media (hover:hover){&:hover{opacity:.8}}&[aria-disabled=true],&[disabled]{&,&:hover{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 10%, transparent);opacity:1}}& .dock-label{font-size:.6875rem}&:after{content:"";background-color:#0000;border-top:3px solid #0000;border-radius:3.40282e38px;width:1.5rem;height:.25rem;transition:background-color .1s ease-out,text-color .1s ease-out,width .1s ease-out;position:absolute;bottom:.2rem}}}@layer daisyui.l1.l2{.dock-active:after{color:currentColor;background-color:currentColor;width:2.5rem}.dock-xs{height:3rem;height:calc(3rem + env(safe-area-inset-bottom))}.dock-xs .dock-active:after{bottom:-.1rem}.dock-xs .dock-label{font-size:.625rem}.dock-sm{height:3.5rem;height:calc(3.5rem + env(safe-area-inset-bottom))}.dock-sm .dock-active:after{bottom:-.1rem}.dock-sm .dock-label{font-size:.625rem}.dock-md{height:4rem;height:calc(4rem + env(safe-area-inset-bottom))}.dock-md .dock-label{font-size:.6875rem}.dock-lg{height:4.5rem;height:calc(4.5rem + env(safe-area-inset-bottom))}.dock-lg .dock-active:after{bottom:.4rem}.dock-lg .dock-label{font-size:.6875rem}.dock-xl{height:5rem;height:calc(5rem + env(safe-area-inset-bottom))}.dock-xl .dock-active:after{bottom:.4rem}.dock-xl .dock-label{font-size:.75rem}}@media (width>=640px){@layer daisyui.l1.l2.l3{.sm\:dock{z-index:1;background-color:var(--color-base-100);color:currentColor;border-top:.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);width:100%;height:4rem;height:calc(4rem + env(safe-area-inset-bottom));padding:.5rem;padding-bottom:env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.sm\:dock>*{cursor:pointer;border-radius:var(--radius-box);background-color:#0000;flex-direction:column;flex-shrink:1;flex-basis:100%;justify-content:center;align-items:center;gap:1px;max-width:8rem;height:100%;margin-bottom:.5rem;transition:opacity .2s ease-out;display:flex;position:relative;@media (hover:hover){&:hover{opacity:.8}}&[aria-disabled=true],&[disabled]{&,&:hover{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 10%, transparent);opacity:1}}& .dock-label{font-size:.6875rem}&:after{content:"";background-color:#0000;border-top:3px solid #0000;border-radius:3.40282e38px;width:1.5rem;height:.25rem;transition:background-color .1s ease-out,text-color .1s ease-out,width .1s ease-out;position:absolute;bottom:.2rem}}}@layer daisyui.l1.l2{.sm\:dock-active:after{color:currentColor;background-color:currentColor;width:2.5rem}.sm\:dock-xs{height:3rem;height:calc(3rem + env(safe-area-inset-bottom))}.sm\:dock-xs .dock-active:after{bottom:-.1rem}.sm\:dock-xs .dock-label{font-size:.625rem}.sm\:dock-sm{height:3.5rem;height:calc(3.5rem + env(safe-area-inset-bottom))}.sm\:dock-sm .dock-active:after{bottom:-.1rem}.sm\:dock-sm .dock-label{font-size:.625rem}.sm\:dock-md{height:4rem;height:calc(4rem + env(safe-area-inset-bottom))}.sm\:dock-md .dock-label{font-size:.6875rem}.sm\:dock-lg{height:4.5rem;height:calc(4.5rem + env(safe-area-inset-bottom))}.sm\:dock-lg .dock-active:after{bottom:.4rem}.sm\:dock-lg .dock-label{font-size:.6875rem}.sm\:dock-xl{height:5rem;height:calc(5rem + env(safe-area-inset-bottom))}.sm\:dock-xl .dock-active:after{bottom:.4rem}.sm\:dock-xl .dock-label{font-size:.75rem}}}@media (width>=768px){@layer daisyui.l1.l2.l3{.md\:dock{z-index:1;background-color:var(--color-base-100);color:currentColor;border-top:.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);width:100%;height:4rem;height:calc(4rem + env(safe-area-inset-bottom));padding:.5rem;padding-bottom:env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.md\:dock>*{cursor:pointer;border-radius:var(--radius-box);background-color:#0000;flex-direction:column;flex-shrink:1;flex-basis:100%;justify-content:center;align-items:center;gap:1px;max-width:8rem;height:100%;margin-bottom:.5rem;transition:opacity .2s ease-out;display:flex;position:relative;@media (hover:hover){&:hover{opacity:.8}}&[aria-disabled=true],&[disabled]{&,&:hover{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 10%, transparent);opacity:1}}& .dock-label{font-size:.6875rem}&:after{content:"";background-color:#0000;border-top:3px solid #0000;border-radius:3.40282e38px;width:1.5rem;height:.25rem;transition:background-color .1s ease-out,text-color .1s ease-out,width .1s ease-out;position:absolute;bottom:.2rem}}}@layer daisyui.l1.l2{.md\:dock-active:after{color:currentColor;background-color:currentColor;width:2.5rem}.md\:dock-xs{height:3rem;height:calc(3rem + env(safe-area-inset-bottom))}.md\:dock-xs .dock-active:after{bottom:-.1rem}.md\:dock-xs .dock-label{font-size:.625rem}.md\:dock-sm{height:3.5rem;height:calc(3.5rem + env(safe-area-inset-bottom))}.md\:dock-sm .dock-active:after{bottom:-.1rem}.md\:dock-sm .dock-label{font-size:.625rem}.md\:dock-md{height:4rem;height:calc(4rem + env(safe-area-inset-bottom))}.md\:dock-md .dock-label{font-size:.6875rem}.md\:dock-lg{height:4.5rem;height:calc(4.5rem + env(safe-area-inset-bottom))}.md\:dock-lg .dock-active:after{bottom:.4rem}.md\:dock-lg .dock-label{font-size:.6875rem}.md\:dock-xl{height:5rem;height:calc(5rem + env(safe-area-inset-bottom))}.md\:dock-xl .dock-active:after{bottom:.4rem}.md\:dock-xl .dock-label{font-size:.75rem}}}@media (width>=1024px){@layer daisyui.l1.l2.l3{.lg\:dock{z-index:1;background-color:var(--color-base-100);color:currentColor;border-top:.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);width:100%;height:4rem;height:calc(4rem + env(safe-area-inset-bottom));padding:.5rem;padding-bottom:env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.lg\:dock>*{cursor:pointer;border-radius:var(--radius-box);background-color:#0000;flex-direction:column;flex-shrink:1;flex-basis:100%;justify-content:center;align-items:center;gap:1px;max-width:8rem;height:100%;margin-bottom:.5rem;transition:opacity .2s ease-out;display:flex;position:relative;@media (hover:hover){&:hover{opacity:.8}}&[aria-disabled=true],&[disabled]{&,&:hover{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 10%, transparent);opacity:1}}& .dock-label{font-size:.6875rem}&:after{content:"";background-color:#0000;border-top:3px solid #0000;border-radius:3.40282e38px;width:1.5rem;height:.25rem;transition:background-color .1s ease-out,text-color .1s ease-out,width .1s ease-out;position:absolute;bottom:.2rem}}}@layer daisyui.l1.l2{.lg\:dock-active:after{color:currentColor;background-color:currentColor;width:2.5rem}.lg\:dock-xs{height:3rem;height:calc(3rem + env(safe-area-inset-bottom))}.lg\:dock-xs .dock-active:after{bottom:-.1rem}.lg\:dock-xs .dock-label{font-size:.625rem}.lg\:dock-sm{height:3.5rem;height:calc(3.5rem + env(safe-area-inset-bottom))}.lg\:dock-sm .dock-active:after{bottom:-.1rem}.lg\:dock-sm .dock-label{font-size:.625rem}.lg\:dock-md{height:4rem;height:calc(4rem + env(safe-area-inset-bottom))}.lg\:dock-md .dock-label{font-size:.6875rem}.lg\:dock-lg{height:4.5rem;height:calc(4.5rem + env(safe-area-inset-bottom))}.lg\:dock-lg .dock-active:after{bottom:.4rem}.lg\:dock-lg .dock-label{font-size:.6875rem}.lg\:dock-xl{height:5rem;height:calc(5rem + env(safe-area-inset-bottom))}.lg\:dock-xl .dock-active:after{bottom:.4rem}.lg\:dock-xl .dock-label{font-size:.75rem}}}@media (width>=1280px){@layer daisyui.l1.l2.l3{.xl\:dock{z-index:1;background-color:var(--color-base-100);color:currentColor;border-top:.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);width:100%;height:4rem;height:calc(4rem + env(safe-area-inset-bottom));padding:.5rem;padding-bottom:env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.xl\:dock>*{cursor:pointer;border-radius:var(--radius-box);background-color:#0000;flex-direction:column;flex-shrink:1;flex-basis:100%;justify-content:center;align-items:center;gap:1px;max-width:8rem;height:100%;margin-bottom:.5rem;transition:opacity .2s ease-out;display:flex;position:relative;@media (hover:hover){&:hover{opacity:.8}}&[aria-disabled=true],&[disabled]{&,&:hover{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 10%, transparent);opacity:1}}& .dock-label{font-size:.6875rem}&:after{content:"";background-color:#0000;border-top:3px solid #0000;border-radius:3.40282e38px;width:1.5rem;height:.25rem;transition:background-color .1s ease-out,text-color .1s ease-out,width .1s ease-out;position:absolute;bottom:.2rem}}}@layer daisyui.l1.l2{.xl\:dock-active:after{color:currentColor;background-color:currentColor;width:2.5rem}.xl\:dock-xs{height:3rem;height:calc(3rem + env(safe-area-inset-bottom))}.xl\:dock-xs .dock-active:after{bottom:-.1rem}.xl\:dock-xs .dock-label{font-size:.625rem}.xl\:dock-sm{height:3.5rem;height:calc(3.5rem + env(safe-area-inset-bottom))}.xl\:dock-sm .dock-active:after{bottom:-.1rem}.xl\:dock-sm .dock-label{font-size:.625rem}.xl\:dock-md{height:4rem;height:calc(4rem + env(safe-area-inset-bottom))}.xl\:dock-md .dock-label{font-size:.6875rem}.xl\:dock-lg{height:4.5rem;height:calc(4.5rem + env(safe-area-inset-bottom))}.xl\:dock-lg .dock-active:after{bottom:.4rem}.xl\:dock-lg .dock-label{font-size:.6875rem}.xl\:dock-xl{height:5rem;height:calc(5rem + env(safe-area-inset-bottom))}.xl\:dock-xl .dock-active:after{bottom:.4rem}.xl\:dock-xl .dock-label{font-size:.75rem}}}@media (width>=1536px){@layer daisyui.l1.l2.l3{.\32 xl\:dock{z-index:1;background-color:var(--color-base-100);color:currentColor;border-top:.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);width:100%;height:4rem;height:calc(4rem + env(safe-area-inset-bottom));padding:.5rem;padding-bottom:env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.\32 xl\:dock>*{cursor:pointer;border-radius:var(--radius-box);background-color:#0000;flex-direction:column;flex-shrink:1;flex-basis:100%;justify-content:center;align-items:center;gap:1px;max-width:8rem;height:100%;margin-bottom:.5rem;transition:opacity .2s ease-out;display:flex;position:relative;@media (hover:hover){&:hover{opacity:.8}}&[aria-disabled=true],&[disabled]{&,&:hover{pointer-events:none;color:color-mix(in oklab, var(--color-base-content) 10%, transparent);opacity:1}}& .dock-label{font-size:.6875rem}&:after{content:"";background-color:#0000;border-top:3px solid #0000;border-radius:3.40282e38px;width:1.5rem;height:.25rem;transition:background-color .1s ease-out,text-color .1s ease-out,width .1s ease-out;position:absolute;bottom:.2rem}}}@layer daisyui.l1.l2{.\32 xl\:dock-active:after{color:currentColor;background-color:currentColor;width:2.5rem}.\32 xl\:dock-xs{height:3rem;height:calc(3rem + env(safe-area-inset-bottom))}.\32 xl\:dock-xs .dock-active:after{bottom:-.1rem}.\32 xl\:dock-xs .dock-label{font-size:.625rem}.\32 xl\:dock-sm{height:3.5rem;height:calc(3.5rem + env(safe-area-inset-bottom))}.\32 xl\:dock-sm .dock-active:after{bottom:-.1rem}.\32 xl\:dock-sm .dock-label{font-size:.625rem}.\32 xl\:dock-md{height:4rem;height:calc(4rem + env(safe-area-inset-bottom))}.\32 xl\:dock-md .dock-label{font-size:.6875rem}.\32 xl\:dock-lg{height:4.5rem;height:calc(4.5rem + env(safe-area-inset-bottom))}.\32 xl\:dock-lg .dock-active:after{bottom:.4rem}.\32 xl\:dock-lg .dock-label{font-size:.6875rem}.\32 xl\:dock-xl{height:5rem;height:calc(5rem + env(safe-area-inset-bottom))}.\32 xl\:dock-xl .dock-active:after{bottom:.4rem}.\32 xl\:dock-xl .dock-label{font-size:.75rem}}}}