sakana-element 2.1.5 → 2.3.0

package/dist/es/theme/Message.css

@@ -0,0 +1,565 @@
+/* Message Variables */
+.px-message {
+  --px-message-bg-color: var(--px-fill-color-blank);
+  --px-message-border-color: var(--px-border-color-dark);
+  --px-message-text-color: var(--px-text-color-primary);
+  --px-message-shadow-color: var(--px-shadow-color);
+  --px-message-padding: 12px 16px;
+  --px-message-close-size: 16px;
+  --px-message-close-icon-color: var(--px-text-color-secondary);
+  --px-message-close-hover-color: var(--px-text-color-primary);
+  --px-message-icon-size: 16px;
+  --px-message-icon-margin: 10px;
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
+}
+/* Base Message Styles - Pixel Game Notification */
+.px-message {
+  width: fit-content;
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+  position: fixed;
+  left: 50%;
+  top: 20px;
+  transform: translateX(-50%);
+  padding: var(--px-message-padding);
+  display: flex;
+  align-items: center;
+  font-family: var(--px-font-family);
+
+  /* Remove traditional styling */
+  background: transparent;
+  border: none;
+
+  /* Pixel shadow via drop-shadow (respects clip-path shape) */
+  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-message-shadow-color));
+
+  /* No smooth transitions for pixel feel */
+  transition: none;
+}
+/* Border layer — filled with border color, clipped to pixel shape */
+.px-message::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-message-border-color);
+    clip-path: polygon(
+      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
+    );
+    z-index: -1;
+}
+/* Fill layer — inset by border width, filled with bg color */
+.px-message::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-message-bg-color);
+    clip-path: polygon(
+      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
+    );
+    box-shadow: var(--px-message-inset-highlight), var(--px-message-inset-shadow);
+    z-index: -1;
+}
+/* Icon styling */
+.px-message .px-message__icon {
+    color: var(--px-message-text-color);
+    font-size: var(--px-message-icon-size);
+    width: var(--px-message-icon-size);
+    margin-right: var(--px-message-icon-margin);
+    flex-shrink: 0;
+}
+/* Content area */
+.px-message .px-message__content {
+    color: var(--px-message-text-color);
+    overflow-wrap: break-word;
+    font-size: var(--px-font-size-base);
+    line-height: 1.5;
+}
+/* With close button */
+.px-message.is-close .px-message__content {
+    padding-right: 12px;
+}
+/* Center alignment */
+.px-message.text-center {
+    justify-content: center;
+}
+/* Close button - pixel style */
+.px-message .px-message__close {
+    display: flex;
+    align-items: center;
+}
+.px-message .px-message__close .px-icon {
+      cursor: pointer;
+      color: var(--px-message-close-icon-color);
+      font-size: var(--px-message-close-size);
+      transition: none;
+}
+.px-message .px-message__close .px-icon:hover {
+        color: var(--px-message-close-hover-color);
+        transform: translate(-1px, -1px);
+}
+.px-message .px-message__close .px-icon:active {
+        transform: translate(1px, 1px);
+}
+/* Map error type to danger color palette so @each loops handle both */
+.px-message--error {
+  --px-color-error: var(--px-color-danger);
+  --px-color-error-dark: var(--px-color-danger-dark);
+  --px-color-error-light-5: var(--px-color-danger-light-5);
+  --px-color-error-light-9: var(--px-color-danger-light-9);
+}
+/* Type variants with pixel styling */
+.px-message--info {
+    --px-message-bg-color: var(--px-color-info-light-9);
+    --px-message-border-color: var(--px-color-info);
+    --px-message-text-color: var(--px-color-info-dark);
+    --px-message-shadow-color: var(--px-color-info-dark);
+}
+.px-message--info .px-message__close .px-icon {
+      color: var(--px-color-info);
+}
+.px-message--info .px-message__close .px-icon:hover {
+        color: var(--px-color-info-dark);
+}
+.px-message--success {
+    --px-message-bg-color: var(--px-color-success-light-9);
+    --px-message-border-color: var(--px-color-success);
+    --px-message-text-color: var(--px-color-success-dark);
+    --px-message-shadow-color: var(--px-color-success-dark);
+}
+.px-message--success .px-message__close .px-icon {
+      color: var(--px-color-success);
+}
+.px-message--success .px-message__close .px-icon:hover {
+        color: var(--px-color-success-dark);
+}
+.px-message--warning {
+    --px-message-bg-color: var(--px-color-warning-light-9);
+    --px-message-border-color: var(--px-color-warning);
+    --px-message-text-color: var(--px-color-warning-dark);
+    --px-message-shadow-color: var(--px-color-warning-dark);
+}
+.px-message--warning .px-message__close .px-icon {
+      color: var(--px-color-warning);
+}
+.px-message--warning .px-message__close .px-icon:hover {
+        color: var(--px-color-warning-dark);
+}
+.px-message--danger {
+    --px-message-bg-color: var(--px-color-danger-light-9);
+    --px-message-border-color: var(--px-color-danger);
+    --px-message-text-color: var(--px-color-danger-dark);
+    --px-message-shadow-color: var(--px-color-danger-dark);
+}
+.px-message--danger .px-message__close .px-icon {
+      color: var(--px-color-danger);
+}
+.px-message--danger .px-message__close .px-icon:hover {
+        color: var(--px-color-danger-dark);
+}
+.px-message--error {
+    --px-message-bg-color: var(--px-color-error-light-9);
+    --px-message-border-color: var(--px-color-error);
+    --px-message-text-color: var(--px-color-error-dark);
+    --px-message-shadow-color: var(--px-color-error-dark);
+}
+.px-message--error .px-message__close .px-icon {
+      color: var(--px-color-error);
+}
+.px-message--error .px-message__close .px-icon:hover {
+        color: var(--px-color-error-dark);
+}
+/* ─── Plain variant ─── */
+.px-message.is-plain {
+  --px-message-bg-color: var(--px-fill-color-blank);
+  --px-message-border-color: var(--px-border-color-light);
+  --px-message-shadow-color: var(--px-border-color-light);
+}
+.px-message--info.is-plain {
+    --px-message-bg-color: var(--px-color-info-light-9);
+    --px-message-border-color: var(--px-color-info-light-5, var(--px-color-info));
+    --px-message-text-color: var(--px-color-info);
+    --px-message-shadow-color: var(--px-color-info-light-5, var(--px-color-info));
+}
+.px-message--success.is-plain {
+    --px-message-bg-color: var(--px-color-success-light-9);
+    --px-message-border-color: var(--px-color-success-light-5, var(--px-color-success));
+    --px-message-text-color: var(--px-color-success);
+    --px-message-shadow-color: var(--px-color-success-light-5, var(--px-color-success));
+}
+.px-message--warning.is-plain {
+    --px-message-bg-color: var(--px-color-warning-light-9);
+    --px-message-border-color: var(--px-color-warning-light-5, var(--px-color-warning));
+    --px-message-text-color: var(--px-color-warning);
+    --px-message-shadow-color: var(--px-color-warning-light-5, var(--px-color-warning));
+}
+.px-message--danger.is-plain {
+    --px-message-bg-color: var(--px-color-danger-light-9);
+    --px-message-border-color: var(--px-color-danger-light-5, var(--px-color-danger));
+    --px-message-text-color: var(--px-color-danger);
+    --px-message-shadow-color: var(--px-color-danger-light-5, var(--px-color-danger));
+}
+.px-message--error.is-plain {
+    --px-message-bg-color: var(--px-color-error-light-9);
+    --px-message-border-color: var(--px-color-error-light-5, var(--px-color-error));
+    --px-message-text-color: var(--px-color-error);
+    --px-message-shadow-color: var(--px-color-error-light-5, var(--px-color-error));
+}
+/* ─── Ghost variant ─── */
+.px-message.is-ghost {
+  --px-message-bg-color: var(--px-fill-color-blank);
+  --px-message-shadow-color: transparent;
+  filter: none;
+}
+.px-message--info.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-info);
+    --px-message-text-color: var(--px-color-info);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--success.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-success);
+    --px-message-text-color: var(--px-color-success);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--warning.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-warning);
+    --px-message-text-color: var(--px-color-warning);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--danger.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-danger);
+    --px-message-text-color: var(--px-color-danger);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--error.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-error);
+    --px-message-text-color: var(--px-color-error);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+/* ─── Timer bar ─── */
+.px-message__timer {
+  position: absolute;
+  bottom: 2px;
+  left: 4px;
+  right: 4px;
+  height: 2px;
+  background: var(--px-message-text-color);
+  opacity: 0.5;
+  animation: px-message-timer linear forwards;
+  transform-origin: left;
+}
+/* Pause timer bar animation when message is hovered (matches JS timer pause) */
+.px-message:hover .px-message__timer {
+  animation-play-state: paused;
+}
+@keyframes px-message-timer {
+0% { transform: scaleX(1);
+}
+100% { transform: scaleX(0);
+}
+}
+/* Dark mode — invert bevel highlights */
+.px-dark .px-message {
+  --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
+  --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
+}
+/* Animation - Pixel style instant appear/disappear */
+.px-message.fade-up-enter-from,
+.px-message.fade-up-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -100%);
+}
+.px-message.fade-up-enter-active,
+.px-message.fade-up-leave-active {
+  transition: opacity 0.15s steps(3), transform 0.15s steps(3);
+}
+/* MessageBox Variables */
+.px-message-box {
+  --px-message-box-title-color: var(--px-text-color-primary);
+  --px-message-box-width: 420px;
+  --px-message-box-font-size: var(--px-font-size-large);
+  --px-message-box-content-font-size: var(--px-font-size-base);
+  --px-message-box-content-color: var(--px-text-color-regular);
+  --px-message-box-padding-primary: 16px;
+  --px-message-box-font-line-height: 1.5;
+  --px-message-box-close-size: var(--px-font-size-base);
+  --px-message-box-border-color: var(--px-border-color);
+  --px-message-box-shadow-color: var(--px-shadow-color);
+  --px-message-box-divider-color: var(--px-border-color-light);
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
+}
+/* Overlay */
+.px-overlay-message-box {
+  text-align: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 16px;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.px-overlay-message-box::after {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    width: 0;
+    vertical-align: middle;
+}
+/* Base MessageBox Styles - Pixel Dialog */
+.px-message-box {
+  display: inline-block;
+  position: relative;
+  max-width: var(--px-message-box-width);
+  width: 100%;
+  padding: var(--px-message-box-padding-primary);
+  vertical-align: middle;
+  font-size: var(--px-message-box-font-size);
+  font-family: var(--px-font-family);
+  text-align: left;
+  overflow: hidden;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+
+  /* Remove traditional styling — pseudo-elements handle visuals */
+  background: transparent;
+  border: none;
+  border-radius: 0;
+
+  /* Pixel shadow via drop-shadow (respects clip-path shape) */
+  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-message-box-shadow-color));
+
+  /* No smooth transitions for pixel feel */
+  transition: none;
+}
+/* Border layer — 3-step staircase clip (8px corners) */
+.px-message-box::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-message-box-border-color);
+    clip-path: polygon(
+      0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
+      calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 8px, 100% 8px,
+      100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
+      8px 100%, 8px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 8px), 0 calc(100% - 8px)
+    );
+    z-index: 0;
+}
+/* Fill layer — 4px inset, 2-step staircase chamfer, beveled */
+.px-message-box::after {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    background: var(--px-bg-color);
+    clip-path: polygon(
+      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
+    );
+    box-shadow: var(--px-message-box-inset-highlight), var(--px-message-box-inset-shadow);
+    z-index: 0;
+}
+.px-message-box:focus {
+    outline: none !important;
+}
+.px-message-box.is-center .px-message-box__title {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+}
+.px-message-box.is-center .px-message-box__footer,
+    .px-message-box.is-center .px-message-box__content {
+      justify-content: center;
+}
+/* Draggable cursor */
+.px-message-box.is-draggable .px-message-box__header {
+    cursor: move;
+    user-select: none;
+}
+.px-message-box :deep(.px-icon).px-icon-info {
+        color: var(--px-color-info) !important;
+}
+.px-message-box :deep(.px-icon).px-icon-success {
+        color: var(--px-color-success) !important;
+}
+.px-message-box :deep(.px-icon).px-icon-warning {
+        color: var(--px-color-warning) !important;
+}
+.px-message-box :deep(.px-icon).px-icon-danger {
+        color: var(--px-color-danger) !important;
+}
+.px-message-box :deep(.px-icon).px-icon-error {
+      color: var(--px-color-danger) !important;
+}
+.px-message-box .px-message-box__header {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-bottom: var(--px-message-box-padding-primary);
+}
+.px-message-box .px-message-box__header .px-message-box__title {
+      flex: 1;
+      color: var(--px-message-box-title-color);
+      font-size: var(--px-message-box-font-size);
+      font-family: var(--px-font-family);
+      font-weight: 500;
+      line-height: var(--px-message-box-font-line-height);
+}
+/* Pixel-dashed divider at bottom */
+.px-message-box .px-message-box__header::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--px-message-box-divider-color) 0px,
+        var(--px-message-box-divider-color) 6px,
+        transparent 6px,
+        transparent 12px
+      );
+}
+.px-message-box .px-message-box__header .px-message-box__header-btn {
+      flex-shrink: 0;
+      margin-left: 8px;
+      padding: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: var(--px-message-box-close-size);
+      cursor: pointer;
+      z-index: 1;
+      transition: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+}
+.px-message-box .px-message-box__header .px-message-box__header-btn i {
+        color: var(--px-text-color-secondary);
+        font-size: inherit;
+}
+.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon {
+        cursor: pointer;
+        transition: none;
+}
+.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:hover {
+          color: var(--px-color-danger);
+          transform: translate(-1px, -1px);
+}
+.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:active {
+          transform: translate(1px, 1px);
+}
+.px-message-box .px-message-box__content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: var(--px-message-box-content-font-size);
+    font-family: var(--px-font-family);
+    color: var(--px-message-box-content-color);
+    padding-top: var(--px-message-box-padding-primary);
+}
+.px-message-box .px-message-box__content .px-message-box__message {
+      margin: 0;
+}
+.px-message-box .px-message-box__content .px-message-box__message p {
+        margin: 0;
+        line-height: var(--px-message-box-font-line-height);
+}
+.px-message-box .px-message-box__input {
+    position: relative;
+    z-index: 1;
+    padding-top: 12px;
+}
+.px-message-box .px-message-box__error {
+    position: relative;
+    z-index: 1;
+    color: var(--px-color-danger);
+    font-size: 12px;
+    font-family: var(--px-font-family);
+    margin-top: 4px;
+}
+.px-message-box .px-message-box__footer {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: var(--px-message-box-padding-primary);
+    gap: 8px;
+}
+/* Type-colored borders */
+.px-message-box.px-message-box--info {
+    --px-message-box-border-color: var(--px-color-info);
+    --px-message-box-shadow-color: var(--px-color-info-dark);
+    --px-message-box-divider-color: var(--px-color-info-light-5, var(--px-color-info));
+}
+.px-message-box.px-message-box--success {
+    --px-message-box-border-color: var(--px-color-success);
+    --px-message-box-shadow-color: var(--px-color-success-dark);
+    --px-message-box-divider-color: var(--px-color-success-light-5, var(--px-color-success));
+}
+.px-message-box.px-message-box--warning {
+    --px-message-box-border-color: var(--px-color-warning);
+    --px-message-box-shadow-color: var(--px-color-warning-dark);
+    --px-message-box-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
+}
+.px-message-box.px-message-box--danger {
+    --px-message-box-border-color: var(--px-color-danger);
+    --px-message-box-shadow-color: var(--px-color-danger-dark);
+    --px-message-box-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
+}
+/* Dark mode — invert bevel highlights */
+.px-dark .px-message-box {
+  --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
+  --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
+}
+/* Animation */
+.fade-in-linear-enter-active .px-overlay-message-box {
+    animation: msgbox-fade-in 0.15s steps(3);
+}
+.fade-in-linear-leave-active .px-overlay-message-box {
+    animation: msgbox-fade-in 0.15s steps(3) reverse;
+}
+@keyframes msgbox-fade-in {
+0% {
+    transform: translate3d(0, -10px, 0);
+    opacity: 0;
+}
+100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+}
+}