harito-ui/dist/index.css

A modern, transparent UI library for React.

html,body{height:100%;margin:0;padding:0;box-sizing:border-box;background-color:rgb(var(--color-background-primary));color:rgb(var(--color-text-primary))}:root{--color-background-primary: 255 255 255;--color-text-primary: 30 30 30;--color-primary: 59 130 246;--color-surface-primary: 255 255 255;--color-shadow-light: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--color-shadow-dark: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--backdrop-filter-blur: blur(5px);--color-border: 220 220 220}.liquid-glass{background:rgba(var(--color-surface-primary),.7);backdrop-filter:var(--backdrop-filter-blur);-webkit-backdrop-filter:var(--backdrop-filter-blur);box-shadow:var(--color-shadow-light);border-radius:16px;border:1px solid rgba(var(--color-border),.18);padding:1rem 2rem;transition:background .3s,box-shadow .3s}.frosted-glass{background:rgba(var(--color-surface-primary),.1);backdrop-filter:var(--backdrop-filter-blur);-webkit-backdrop-filter:var(--backdrop-filter-blur);border-radius:10px;border:1px solid rgba(var(--color-border),.18);box-shadow:var(--color-shadow-light)}.transparent-glass{background:transparent;border:none;box-shadow:none}.neumorphic{border-radius:50px;background:rgb(var(--color-surface-primary));box-shadow:20px 20px 60px rgba(var(--color-shadow-dark),.5),-20px -20px 60px rgba(var(--color-shadow-light),.5)}.button-primary{background-color:rgb(var(--color-primary));color:rgb(var(--color-text-primary))}.text-primary{color:rgb(var(--color-text-primary))}.bg-primary{background-color:rgb(var(--color-background-primary))}.surface-primary{background-color:rgb(var(--color-surface-primary))}.shadow-light{box-shadow:0 4px 6px -1px var(--color-shadow-light),0 2px 4px -1px var(--color-shadow-light)}.shadow-dark{box-shadow:0 4px 6px -1px var(--color-shadow-dark),0 2px 4px -1px var(--color-shadow-dark)}.border-primary{border:1px solid rgb(var(--color-border))}.themed-card{padding:16px;border-radius:12px;background-color:rgb(var(--color-surface-primary));border:1px solid rgb(var(--color-border));box-shadow:var(--color-shadow-light);transition:background-color .3s,border-color .3s,box-shadow .3s}.themed-card-title{color:rgb(var(--color-primary));font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.themed-card-content{color:rgb(var(--color-text-primary));font-size:1rem}