@rpgjs/ui-css 5.0.0-alpha.44 → 5.0.0-beta.1

package/src/primitives/hud.css

@@ -0,0 +1,248 @@
+body.rpg-ui-app,
+.rpg-ui-app {
+  min-height: 100vh;
+  margin: 0;
+  background-color: var(--rpg-ui-body-bg);
+  background-image: var(--rpg-ui-body-background);
+  background-size: var(--rpg-ui-body-background-size);
+  background-position: var(--rpg-ui-body-background-position);
+  background-attachment: var(--rpg-ui-body-background-attachment);
+  color: var(--rpg-ui-text);
+  font-family: var(--rpg-ui-font);
+}
+
+body.rpg-ui-app {
+  overflow: hidden;
+}
+
+.rpg-ui-app {
+  position: relative;
+  isolation: isolate;
+}
+
+.glass-panel,
+.rpg-ui-glass-panel {
+  background: var(--rpg-ui-surface-overlay);
+  backdrop-filter: var(--rpg-ui-backdrop-blur);
+  -webkit-backdrop-filter: var(--rpg-ui-backdrop-blur);
+  border: 1px solid var(--rpg-ui-border);
+  border-radius: var(--rpg-ui-radius-lg);
+  box-shadow: var(--rpg-ui-shadow-lg);
+}
+
+.rpg-hud,
+.rpg-ui-hud {
+  position: absolute;
+  top: var(--rpg-ui-hud-top);
+  left: var(--rpg-ui-hud-left);
+  display: flex;
+  gap: var(--rpg-ui-hud-gap);
+  align-items: center;
+  padding: var(--rpg-ui-hud-padding);
+  border-radius: var(--rpg-ui-radius-full);
+  background: var(--rpg-ui-hud-background);
+  backdrop-filter: var(--rpg-ui-backdrop-blur);
+  -webkit-backdrop-filter: var(--rpg-ui-backdrop-blur);
+  border: 1px solid var(--rpg-ui-hud-border);
+  z-index: 20;
+}
+
+.rpg-avatar,
+.rpg-ui-avatar {
+  width: var(--rpg-ui-avatar-size);
+  height: var(--rpg-ui-avatar-size);
+  border-radius: 50%;
+  background: var(--rpg-ui-avatar-background);
+  border: var(--rpg-ui-avatar-border-width) solid var(--rpg-ui-avatar-border);
+  box-shadow: var(--rpg-ui-avatar-shadow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(var(--rpg-ui-avatar-size) * 0.5);
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.rpg-avatar-face,
+.rpg-ui-avatar-face {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+}
+
+.rpg-avatar-face > *,
+.rpg-ui-avatar-face > * {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: var(--rpg-ui-avatar-content-transform);
+}
+
+.rpg-avatar-level,
+.rpg-ui-avatar-level {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  border: 1px solid var(--rpg-ui-avatar-level-border);
+  background: var(--rpg-ui-avatar-level-bg);
+  color: var(--rpg-ui-avatar-level-color);
+  font-size: 12px;
+  font-weight: var(--rpg-ui-font-weight-bold);
+}
+
+.rpg-status-bars,
+.rpg-ui-status-bars {
+  display: flex;
+  min-width: var(--rpg-ui-status-bars-width);
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rpg-bar-container,
+.rpg-ui-status-bar {
+  position: relative;
+  height: var(--rpg-ui-status-bar-height);
+  overflow: hidden;
+  border-radius: var(--rpg-ui-radius-full);
+  background: var(--rpg-ui-status-bar-background);
+}
+
+.rpg-bar-fill,
+.rpg-ui-status-bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  transition: width 0.3s ease-out;
+  box-shadow: var(--rpg-ui-status-bar-shadow);
+  background: var(--rpg-ui-gradient-bar);
+}
+
+.rpg-bar-fill.health,
+.rpg-ui-status-bar-fill[data-type="health"] {
+  background: var(--rpg-ui-health-gradient);
+}
+
+.rpg-bar-fill.mana,
+.rpg-ui-status-bar-fill[data-type="mana"] {
+  background: var(--rpg-ui-mana-gradient);
+}
+
+.rpg-bar-fill.xp,
+.rpg-ui-status-bar-fill[data-type="experience"] {
+  background: var(--rpg-ui-xp-gradient);
+}
+
+.rpg-bar-text,
+.rpg-ui-status-bar-label {
+  position: absolute;
+  top: 50%;
+  left: 6px;
+  transform: translateY(-50%);
+  color: var(--rpg-ui-status-bar-label-color);
+  font-size: 12px;
+  font-weight: var(--rpg-ui-font-weight-bold);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
+  white-space: nowrap;
+}
+
+.rpg-item-dock,
+.rpg-ui-dock {
+  position: absolute;
+  left: var(--rpg-ui-dock-left);
+  bottom: var(--rpg-ui-dock-bottom);
+  display: flex;
+  gap: var(--rpg-ui-dock-gap);
+  padding: var(--rpg-ui-dock-padding);
+  border-radius: var(--rpg-ui-radius-lg);
+  transform: translateX(var(--rpg-ui-dock-translate-x));
+  z-index: 20;
+}
+
+.rpg-item-slot,
+.rpg-ui-dock-slot {
+  position: relative;
+  display: flex;
+  width: var(--rpg-ui-dock-slot-size);
+  height: var(--rpg-ui-dock-slot-size);
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--rpg-ui-dock-slot-border);
+  border-radius: var(--rpg-ui-radius-md);
+  background: var(--rpg-ui-dock-slot-bg);
+  font-size: 28px;
+  cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.rpg-item-slot:hover,
+.rpg-ui-dock-slot:hover,
+.rpg-ui-dock-slot[data-hover="true"] {
+  transform: translateY(-8px) scale(1.08);
+  background: var(--rpg-ui-dock-slot-bg-hover);
+  border-color: var(--rpg-ui-dock-slot-border-hover);
+  box-shadow: var(--rpg-ui-dock-slot-shadow-hover);
+}
+
+.rpg-item-slot.active,
+.rpg-ui-dock-slot[data-active="true"],
+.rpg-ui-dock-slot[data-selected="true"] {
+  border-color: var(--rpg-ui-accent);
+  background: var(--rpg-ui-dock-slot-bg-active);
+  box-shadow: 0 0 15px color-mix(in srgb, var(--rpg-ui-accent), transparent 35%);
+}
+
+.rpg-item-qty,
+.rpg-ui-dock-slot-qty {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  color: var(--rpg-ui-text);
+  font-size: 12px;
+  font-weight: var(--rpg-ui-font-weight-bold);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
+}
+
+.rpg-fab,
+.rpg-ui-fab {
+  position: absolute;
+  right: var(--rpg-ui-fab-right);
+  bottom: var(--rpg-ui-fab-bottom);
+  display: flex;
+  width: var(--rpg-ui-fab-size);
+  height: var(--rpg-ui-fab-size);
+  align-items: center;
+  justify-content: center;
+  border: 4px solid var(--rpg-ui-fab-border);
+  border-radius: 50%;
+  background: var(--rpg-ui-fab-gradient);
+  box-shadow: var(--rpg-ui-fab-shadow);
+  font-size: 32px;
+  cursor: pointer;
+  transition: transform 0.12s ease;
+  z-index: 20;
+}
+
+.rpg-fab:active,
+.rpg-ui-fab:active {
+  transform: scale(0.95);
+}
+
+.rpg-minimap,
+.rpg-ui-minimap {
+  position: absolute;
+  top: var(--rpg-ui-minimap-top);
+  right: var(--rpg-ui-minimap-right);
+  width: var(--rpg-ui-minimap-size);
+  height: var(--rpg-ui-minimap-size);
+  overflow: hidden;
+  border: 4px solid var(--rpg-ui-minimap-border);
+  border-radius: 50%;
+  background: var(--rpg-ui-minimap-background);
+  box-shadow: var(--rpg-ui-minimap-shadow);
+  z-index: 20;
+}

package/src/primitives/shop.css

@@ -0,0 +1,467 @@
+.rpg-shop-container {
+  position: absolute;
+  inset: 20px;
+  display: flex;
+  width: auto;
+  max-width: var(--rpg-ui-shop-max-width);
+  height: auto;
+  min-height: calc(100% - 40px);
+  margin: 0 auto;
+  flex-direction: column;
+  border: 1px solid var(--rpg-ui-shop-muted-border);
+  border-radius: var(--rpg-ui-radius-lg);
+  background: var(--rpg-ui-surface-overlay-strong);
+  backdrop-filter: var(--rpg-ui-backdrop-blur);
+  -webkit-backdrop-filter: var(--rpg-ui-backdrop-blur);
+  box-shadow: var(--rpg-ui-shadow-lg);
+}
+
+.rpg-shop-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.rpg-shop-left {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.rpg-shop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 30px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.rpg-shop-merchant {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.rpg-shop-merchant-avatar {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 2px solid var(--rpg-ui-accent);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.35);
+  flex-shrink: 0;
+}
+
+.rpg-shop-merchant-avatar > * {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain;
+}
+
+.rpg-shop-merchant-info h2,
+.rpg-shop-merchant-info p {
+  margin: 0;
+}
+
+.rpg-shop-merchant-info p {
+  color: var(--rpg-ui-text-muted);
+}
+
+.rpg-shop-gold {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: 1px solid color-mix(in srgb, var(--rpg-ui-shop-gold-color), transparent 70%);
+  border-radius: var(--rpg-ui-radius-full);
+  background: rgba(0, 0, 0, 0.32);
+  color: var(--rpg-ui-shop-gold-color);
+  font-weight: var(--rpg-ui-font-weight-bold);
+  white-space: nowrap;
+}
+
+.rpg-shop-tabs {
+  display: flex;
+  gap: 24px;
+  padding: 0 30px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.rpg-shop-tab {
+  position: relative;
+  padding: 16px 0;
+  color: var(--rpg-ui-text-muted);
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.rpg-shop-tab:hover {
+  color: var(--rpg-ui-text);
+}
+
+.rpg-shop-tab.active,
+.rpg-shop-tab:focus {
+  color: var(--rpg-ui-accent);
+  font-weight: var(--rpg-ui-font-weight-bold);
+  outline: none;
+}
+
+.rpg-shop-tab.active::after,
+.rpg-shop-tab:focus::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+  background: var(--rpg-ui-accent);
+  box-shadow: 0 -2px 10px color-mix(in srgb, var(--rpg-ui-accent), transparent 15%);
+}
+
+.rpg-shop-content {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.rpg-shop-grid {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  padding: 30px;
+}
+
+.rpg-shop-card {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 12px 20px;
+  border: 1px solid var(--rpg-ui-shop-card-border);
+  border-radius: var(--rpg-ui-radius-md);
+  background: var(--rpg-ui-shop-card-background);
+  cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.rpg-shop-card.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.rpg-shop-card.disabled:hover,
+.rpg-shop-card.disabled:focus {
+  transform: none;
+  background: var(--rpg-ui-shop-card-background);
+  border-color: var(--rpg-ui-shop-card-border);
+  box-shadow: none;
+}
+
+.rpg-shop-card:hover {
+  transform: translateX(4px);
+  background: var(--rpg-ui-shop-card-background-hover);
+}
+
+.rpg-shop-card.selected,
+.rpg-shop-card:focus {
+  outline: none;
+  border-color: var(--rpg-ui-shop-card-border-active);
+  background: var(--rpg-ui-shop-card-background-active);
+  box-shadow: 0 0 20px color-mix(in srgb, var(--rpg-ui-accent), transparent 85%);
+}
+
+.rpg-shop-card-icon,
+.rpg-shop-details-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.rpg-shop-card-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--rpg-ui-radius-sm);
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.rpg-shop-card-icon > *,
+.rpg-shop-details-icon > * {
+  width: 100% !important;
+  height: 100% !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  background-size: contain !important;
+}
+
+.rpg-shop-card-name {
+  flex: 1;
+  font-size: 16px;
+  font-weight: var(--rpg-ui-font-weight-bold);
+  text-align: left;
+}
+
+.rpg-shop-card-price,
+.rpg-shop-details-qty,
+.rpg-shop-modal-qty {
+  color: var(--rpg-ui-shop-gold-color);
+  font-weight: var(--rpg-ui-font-weight-bold);
+}
+
+.rpg-shop-card-qty {
+  color: var(--rpg-ui-text-muted);
+  font-size: var(--rpg-ui-font-size-sm);
+  white-space: nowrap;
+}
+
+.rpg-shop-details {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 30px;
+  background: rgba(0, 0, 0, 0.2);
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.rpg-shop-details-header {
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: center;
+}
+
+.rpg-shop-details-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 16px;
+  border: 2px solid var(--rpg-ui-border-light);
+  border-radius: var(--rpg-ui-radius-md);
+  font-size: 40px;
+}
+
+.rpg-shop-details-desc {
+  flex: 1;
+  color: var(--rpg-ui-text-muted);
+  line-height: 1.6;
+  font-size: var(--rpg-ui-font-size-sm);
+}
+
+.rpg-shop-content-mode {
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+}
+
+.rpg-shop-details-mode {
+  width: 100%;
+  max-width: 360px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-left: none;
+  border-radius: var(--rpg-ui-radius-lg);
+  background: rgba(0, 0, 0, 0.35);
+  box-shadow: var(--rpg-ui-shadow-md);
+}
+
+.rpg-shop-card-tag {
+  padding: 4px 8px;
+  border: 1px solid color-mix(in srgb, var(--rpg-ui-accent), transparent 60%);
+  border-radius: var(--rpg-ui-radius-full);
+  background: color-mix(in srgb, var(--rpg-ui-accent), transparent 86%);
+  color: var(--rpg-ui-accent);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.rpg-shop-equipped {
+  color: var(--rpg-ui-accent);
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.rpg-shop-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.rpg-shop-stat {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--rpg-ui-text-muted);
+}
+
+.rpg-shop-stat.positive .rpg-shop-stat-value {
+  color: #7dff9a;
+}
+
+.rpg-shop-stat.negative .rpg-shop-stat-value {
+  color: #ff7d7d;
+}
+
+.rpg-shop-stat-key {
+  color: var(--rpg-ui-text);
+  font-weight: var(--rpg-ui-font-weight-bold);
+  letter-spacing: 0.5px;
+}
+
+.rpg-shop-stat-value {
+  color: #7fffd4;
+  font-weight: var(--rpg-ui-font-weight-bold);
+}
+
+.rpg-shop-stat-current {
+  color: var(--rpg-ui-text-muted);
+  font-size: 11px;
+}
+
+.rpg-shop-trade {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.rpg-shop-trade-tabs {
+  padding: 0;
+  border-bottom: none;
+}
+
+.rpg-shop-quantity {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: var(--rpg-ui-radius-md);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.rpg-shop-quantity-label {
+  color: var(--rpg-ui-text-muted);
+  font-size: 12px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.rpg-shop-quantity-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rpg-shop-quantity-value {
+  min-width: 24px;
+  text-align: center;
+  font-weight: var(--rpg-ui-font-weight-bold);
+}
+
+.rpg-shop-modal {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.rpg-shop-modal-card {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: var(--rpg-ui-radius-lg);
+  background: rgba(15, 15, 25, 0.95);
+  box-shadow: var(--rpg-ui-shadow-md);
+}
+
+.rpg-shop-modal-title {
+  color: var(--rpg-ui-accent);
+  font-size: 18px;
+  font-weight: var(--rpg-ui-font-weight-bold);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.rpg-shop-modal-item {
+  color: var(--rpg-ui-text);
+  font-size: 16px;
+}
+
+.rpg-shop-modal-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.rpg-shop-modal-total {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--rpg-ui-accent);
+  font-weight: var(--rpg-ui-font-weight-bold);
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
+
+.rpg-shop-btn {
+  width: 100%;
+  padding: 16px;
+  border: none;
+  border-radius: var(--rpg-ui-radius-full);
+  background: var(--rpg-ui-accent);
+  color: #03121a;
+  font-size: 16px;
+  font-weight: var(--rpg-ui-font-weight-bold);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.rpg-shop-btn:hover {
+  background: var(--rpg-ui-accent-hover);
+  box-shadow: 0 0 20px color-mix(in srgb, var(--rpg-ui-accent), transparent 25%);
+}
+
+.rpg-shop-btn.rpg-shop-btn-secondary {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--rpg-ui-text);
+}
+
+.rpg-shop-btn.rpg-shop-btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.18);
+  box-shadow: none;
+}
+
+@media (max-width: 900px) {
+  .rpg-shop-body {
+    flex-direction: column;
+  }
+
+  .rpg-shop-details {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
+}