@eternaljs/styles/dist/index.css

A comprehensive design system and styling package for Eternals JS applications. Features complete color palettes, typography system, spacing utilities, theming capabilities, and modern CSS custom properties.

.p-hourpicker{max-width:280px;overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--gray-200);margin-top:var(--margin-xs)}.p-hourpicker>.p-overlaypanel-content{padding:var(--padding-sm);overflow:hidden}.p-hourpicker-header{padding:var(--padding-rg);border-bottom:1px solid var(--gray-200);margin-bottom:var(--margin-sm)}.p-hourpicker-header-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-align:center}.p-hourpicker-items{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.p-hourpicker-item{width:38px;height:38px;margin:var(--margin-xxs);border-radius:var(--radius-rg);cursor:pointer;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--padding-xs);white-space:nowrap}.p-hourpicker-item-title{font-size:var(--fs-xs);line-height:var(--lh-none)}.p-hourpicker-item-text{font-size:.6rem;margin-top:1px;font-weight:var(--fw-medium);color:var(--gray-400)}.p-hourpicker-item:hover{background-color:var(--primary-100)}.p-hourpicker-item[ec-calendar-hour-highlight=true]{color:var(--primary-600);border-color:var(--gray-300);background-color:var(--gray-300)}.p-hourpicker-item[ec-calendar-hour-highlight=true]>.ec-calendar-hourpicker-item-text{color:var(--gray-500)}.p-hourpicker-item[aria-selected=true]{color:var(--white-color);border-color:var(--primary-600);background-color:var(--primary-600)}.p-hourpicker-item[aria-selected=true]>.ec-calendar-hourpicker-item-text{color:var(--gray-200)}.loading-container{display:flex;align-items:center;gap:10px}.bouncing-ball{width:25px;height:25px;border-radius:50%;animation:bounce 2s ease-in-out infinite both}.ball-1{background-color:var(--blue-400);animation-delay:0s}.ball-2{background-color:var(--emerald-400);animation-delay:.2s}.ball-3{background-color:var(--red-400);animation-delay:.4s}.ball-4{background-color:var(--teal-400);animation-delay:.6s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.ec-badge,.ec-badge-preset-primary,.ec-badge-preset-warning,.ec-badge-preset-hold,.ec-badge-preset-denied,.ec-badge-preset-confirmed,.ec-badge-preset-pending,.ec-badge-link-primary,.ec-badge-link-warning,.ec-badge-link-hold,.ec-badge-link-denied,.ec-badge-link-confirmed,.ec-badge-link-pending,.ec-badge-outline-primary,.ec-badge-outline-warning,.ec-badge-outline-hold,.ec-badge-outline-denied,.ec-badge-outline-confirmed,.ec-badge-outline-pending,.ec-badge-solid-primary,.ec-badge-solid-warning,.ec-badge-solid-hold,.ec-badge-solid-denied,.ec-badge-solid-confirmed,.ec-badge-solid-pending,.ec-badge-light-primary,.ec-badge-light-warning,.ec-badge-light-hold,.ec-badge-light-denied,.ec-badge-light-confirmed,.ec-badge-light-pending{font-size:var(--fs-xxs);font-weight:var(--fw-medium);-webkit-user-select:none;user-select:none;border-radius:var(--radius-md);padding:var(--padding-xxs) var(--padding-rg);white-space:nowrap;display:flex;align-items:center;justify-content:center;width:fit-content}.ec-badge-icon-start{display:flex;align-items:center;justify-content:center;width:15px;height:15px}.ec-badge-icon-start i{text-align:start}.ec-badge-icon-end{display:flex;align-items:center;justify-content:center;width:15px;height:15px}.ec-badge-icon-end i{text-align:end}.ec-badge-title{font-size:var(--fs-xxs);font-weight:var(--fw-medium)}.ec-badge-split,.ec-badge-split-primary,.ec-badge-split-warning,.ec-badge-split-hold,.ec-badge-split-denied,.ec-badge-split-confirmed,.ec-badge-split-pending{font-size:var(--fs-xxs);font-weight:var(--fw-medium);-webkit-user-select:none;user-select:none;white-space:nowrap;display:flex;align-items:center;justify-content:center;color:var(--white-color)}.ec-badge-split-label{padding:var(--padding-xxs) var(--padding-rg);border-radius:var(--radius-md) 0px 0px var(--radius-md);display:flex;align-items:center;justify-content:center}.ec-badge-split-value{border-radius:0px var(--radius-md) var(--radius-md) 0px;padding:var(--padding-xxs) var(--padding-rg);display:flex;align-items:center;justify-content:center}.ec-badge-light-pending{color:var(--blue-600);background-color:var(--blue-100);border:1px solid transparent}.ec-badge-light-confirmed{color:var(--emerald-600);background-color:var(--emerald-100);border:1px solid transparent}.ec-badge-light-denied{color:var(--red-600);background-color:var(--red-100);border:1px solid transparent}.ec-badge-light-hold{color:var(--teal-600);background-color:var(--teal-100);border:1px solid transparent}.ec-badge-light-warning{color:var(--amber-600);background-color:var(--amber-100);border:1px solid transparent}.ec-badge-light-primary{color:var(--primary-600);background-color:var(--primary-100);border:1px solid transparent}.ec-badge-solid-pending{color:var(--white-color);background-color:var(--blue-600);border:1px solid transparent}.ec-badge-solid-confirmed{color:var(--white-color);background-color:var(--emerald-600);border:1px solid transparent}.ec-badge-solid-denied{color:var(--white-color);background-color:var(--red-600);border:1px solid transparent}.ec-badge-solid-hold{color:var(--white-color);background-color:var(--teal-600);border:1px solid transparent}.ec-badge-solid-warning{color:var(--white-color);background-color:var(--amber-600);border:1px solid transparent}.ec-badge-solid-primary{color:var(--white-color);background-color:var(--primary-600);border:1px solid transparent}.ec-badge-outline-pending{color:var(--blue-600);border:1px solid var(--blue-600)}.ec-badge-outline-confirmed{color:var(--emerald-600);border:1px solid var(--emerald-600)}.ec-badge-outline-denied{color:var(--red-600);border:1px solid var(--red-600)}.ec-badge-outline-hold{color:var(--teal-600);border:1px solid var(--teal-600)}.ec-badge-outline-warning{color:var(--amber-600);border:1px solid var(--amber-600)}.ec-badge-outline-primary{color:var(--primary-600);border:1px solid var(--primary-600)}.ec-badge-link-pending{color:var(--blue-600);border:1px solid transparent}.ec-badge-link-confirmed{color:var(--emerald-600);border:1px solid transparent}.ec-badge-link-denied{color:var(--red-600);border:1px solid transparent}.ec-badge-link-hold{color:var(--teal-600);border:1px solid transparent}.ec-badge-link-warning{color:var(--amber-600);border:1px solid transparent}.ec-badge-link-primary{color:var(--primary-600);border:1px solid transparent}.ec-badge-preset-pending:before{content:"";width:10px;height:10px;border-radius:50%;background-color:var(--blue-600);margin-right:var(--margin-xs)}.ec-badge-preset-pending{border:1px solid transparent}.ec-badge-preset-confirmed:before{content:"";width:10px;height:10px;border-radius:50%;background-color:var(--emerald-600);margin-right:var(--margin-xs)}.ec-badge-preset-confirmed{border:1px solid transparent}.ec-badge-preset-denied:before{content:"";width:10px;height:10px;border-radius:50%;background-color:var(--red-600);margin-right:var(--margin-xs)}.ec-badge-preset-denied{border:1px solid transparent}.ec-badge-preset-hold:before{content:"";width:10px;height:10px;border-radius:50%;background-color:var(--teal-600);margin-right:var(--margin-xs)}.ec-badge-preset-hold{border:1px solid transparent}.ec-badge-preset-warning:before{content:"";width:10px;height:10px;border-radius:50%;background-color:var(--amber-600);margin-right:var(--margin-xs)}.ec-badge-preset-warning{border:1px solid transparent}.ec-badge-preset-primary:before{content:"";width:10px;height:10px;border-radius:50%;background-color:var(--primary-600);margin-right:var(--margin-xs)}.ec-badge-split-pending-label{background-color:var(--gray-500)}.ec-badge-split-pending-value{background-color:var(--blue-600)}.ec-badge-split-confirmed-label{background-color:var(--gray-500)}.ec-badge-split-confirmed-value{background-color:var(--emerald-600)}.ec-badge-split-denied-label{background-color:var(--gray-500)}.ec-badge-split-denied-value{background-color:var(--red-600)}.ec-badge-split-hold-label{background-color:var(--gray-500)}.ec-badge-split-hold-value{background-color:var(--teal-600)}.ec-badge-split-warning-label{background-color:var(--gray-500)}.ec-badge-split-warning-value{background-color:var(--amber-600)}.ec-badge-split-primary-label{background-color:var(--gray-500)}.ec-badge-split-primary-value{background-color:var(--primary-600)}