neumo-ui/dist/native.css

Neumorphism CSS toolkit with light/dark mode, utilities and theming.

:root{--nui-border-radius:1rem;--nui-font-size-xs:0.75rem;--nui-font-size-sm:0.875rem;--nui-font-size-md:1rem;--nui-font-size-lg:1.125rem;--nui-spacing-xs:0.25rem;--nui-spacing-sm:0.5rem;--nui-spacing-md:1rem;--nui-spacing-lg:1.5rem;--nui-shadow-offset:10px;--nui-shadow-blur:20px;--nui-shadow-intensity:0.5;--nui-direction-x:1;--nui-direction-y:1;--nui-dark-outer-shadow:calc(var(--nui-shadow-offset)*var(--nui-direction-x)) calc(var(--nui-shadow-offset)*var(--nui-direction-y)) var(--nui-shadow-blur) var(--nui-shadows);--nui-dark-inset-shadow:inset calc(var(--nui-shadow-offset)*var(--nui-direction-x)) calc(var(--nui-shadow-offset)*var(--nui-direction-y)) var(--nui-shadow-blur) var(--nui-shadows);--nui-dark-outer-light:calc(var(--nui-shadow-offset)*var(--nui-direction-x)*-1) calc(var(--nui-shadow-offset)*var(--nui-direction-y)*-1) var(--nui-shadow-blur) var(--nui-lights);--nui-dark-inset-light:inset calc(var(--nui-shadow-offset)*var(--nui-direction-x)*-1) calc(var(--nui-shadow-offset)*var(--nui-direction-y)*-1) var(--nui-shadow-blur) var(--nui-lights)}[data-nui-light-direction=top-left]{--nui-direction-x:1;--nui-direction-y:1}[data-nui-light-direction=top-right]{--nui-direction-x:-1;--nui-direction-y:1}[data-nui-light-direction=bottom-left]{--nui-direction-x:1;--nui-direction-y:-1}[data-nui-light-direction=bottom-right]{--nui-direction-x:-1;--nui-direction-y:-1}.nui-neuromorphic,.nui-neuromorphic-inset-active{box-shadow:var(--nui-dark-outer-shadow),var(--nui-dark-outer-light)}.nui-neuromorphic,.nui-neuromorphic-active,.nui-neuromorphic-inset,.nui-neuromorphic-inset-active{background:var(--nui-bg-color);border:none;border-radius:var(--nui-border-radius);transition:all .1s ease}.nui-neuromorphic-active,.nui-neuromorphic-inset{box-shadow:var(--nui-dark-inset-shadow),var(--nui-dark-inset-light)}.nui-clickable{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none}.nui-clickable.nui-neuromorphic:active{background:var(--nui-bg-color);border:none;border-radius:var(--nui-border-radius);box-shadow:var(--nui-dark-inset-shadow),var(--nui-dark-inset-light);transition:all .1s ease}.nui-clickable.nui-neuromorphic-inset:active{border-radius:var(--nui-border-radius)}.nui-clickable.nui-neuromorphic-inset:active,button,select{background:var(--nui-bg-color);border:none;box-shadow:var(--nui-dark-outer-shadow),var(--nui-dark-outer-light);transition:all .1s ease}button,select{border-radius:var(--nui-border-radius);transition:all .2s ease}button,input,select,textarea{color:var(--nui-text-color);font-size:var(--nui-font-size-md);outline:none;padding:var(--nui-spacing-sm) var(--nui-spacing-md)}input,textarea{background:var(--nui-bg-color);border:none;border-radius:var(--nui-border-radius);box-shadow:var(--nui-dark-inset-shadow),var(--nui-dark-inset-light);transition:all .1s ease;transition:all .2s ease}input[type=checkbox]{border:0 solid transparent;border-radius:var(--nui-border-radius);border-radius:.25rem}input[type=checkbox],input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--nui-bg-color);box-shadow:var(--nui-dark-outer-shadow),var(--nui-dark-outer-light);height:1.5rem;padding:4px;transition:all .1s ease;transition:all .2s ease;width:1.5rem}input[type=radio]{border:0 solid transparent;border-radius:var(--nui-border-radius)}input[type=checkbox]:checked,input[type=radio]:checked{background:var(--nui-bg-color);border:none;border-radius:var(--nui-border-radius);box-shadow:var(--nui-dark-inset-shadow),var(--nui-dark-inset-light);transition:all .1s ease}input[type=checkbox]:checked{border-radius:.25rem}input[type=radio]:before{border:solid var(--nui-text-color);border-radius:calc(infinity * 1px);content:"";display:block;height:1rem;width:1rem}input[type=checkbox]:before{border:solid var(--nui-text-color);border-radius:.2rem;content:"";display:block;height:1rem;width:1rem}input[type=checkbox]:checked:before,input[type=radio]:checked:before{background-color:var(--nui-text-color)}button.nui-clickable:active,select:focus{background:var(--nui-bg-color);border:none;border-radius:var(--nui-border-radius);box-shadow:var(--nui-dark-inset-shadow),var(--nui-dark-inset-light);transition:all .1s ease}button.small,input.small,select.small,textarea.small{font-size:var(--nui-font-size-sm);padding:var(--nui-spacing-xs) var(--nui-spacing-sm)}:root{color-scheme:light dark;--nui-text-color:light-dark(var(--nui-light-text-color),var(--nui-dark-text-color));--nui-bg-color:light-dark(var(--nui-light-bg-color),var(--nui-dark-bg-color));--nui-lights:light-dark(var(--nui-light-lights),var(--nui-dark-lights));--nui-shadows:light-dark(var(--nui-light-shadows),var(--nui-dark-shadows))}[data-nui-theme=light]{--nui-text-color:var(--nui-light-text-color);--nui-bg-color:var(--nui-light-bg-color);--nui-lights:var(--nui-light-lights);--nui-shadows:var(--nui-light-shadows)}[data-nui-theme=dark]{--nui-text-color:var(--nui-dark-text-color);--nui-bg-color:var(--nui-dark-bg-color);--nui-lights:var(--nui-dark-lights);--nui-shadows:var(--nui-dark-shadows)}