@gamepark/react-game 7.6.4 → 7.6.6

package/dist/components/material/GameTable/DevToolsStyles.js

@@ -1,752 +0,0 @@
-import { css, keyframes } from '@emotion/react';
-export const GP_PRIMARY = '#28B8CE';
-export const GP_DARK = '#002448';
-export const GP_SURFACE = '#0a1929';
-export const GP_ACCENT = '#9fe2f7';
-// ── Animations ──
-const fabPulse = keyframes `
-  0%, 100% { box-shadow: 0 0 0 0 rgba(40, 184, 206, 0.25); }
-  50% { box-shadow: 0 0 0 5px rgba(40, 184, 206, 0); }
-`;
-const slideUp = keyframes `
-  from { opacity: 0; transform: translateY(8px) scale(0.97); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-`;
-const slideRight = keyframes `
-  from { opacity: 0; transform: translateX(-8px) scale(0.97); }
-  to { opacity: 1; transform: translateX(0) scale(1); }
-`;
-const toolReveal = keyframes `
-  from { opacity: 0; transform: translateX(-6px); }
-  to { opacity: 1; transform: translateX(0); }
-`;
-const modalFadeIn = keyframes `
-  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
-  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-`;
-const flashFade = keyframes `
-  0% { opacity: 0; transform: translateY(6px); }
-  15% { opacity: 1; transform: translateY(0); }
-  85% { opacity: 1; transform: translateY(0); }
-  100% { opacity: 0; transform: translateY(-6px); }
-`;
-// ── FAB button ──
-export const fabCss = css `
-  position: fixed;
-  bottom: 16px;
-  left: 16px;
-  z-index: 900;
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  border: 1px solid rgba(40, 184, 206, 0.4);
-  background: linear-gradient(145deg, ${GP_SURFACE}, ${GP_DARK});
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  animation: ${fabPulse} 3s ease-in-out infinite;
-  transition: all 0.2s;
-
-  &:hover {
-    border-color: rgba(40, 184, 206, 0.7);
-    animation: none;
-  }
-
-  &[data-open="true"] {
-    animation: none;
-    background: ${GP_PRIMARY};
-    border-color: ${GP_PRIMARY};
-  }
-`;
-export const logoCss = css `
-  width: 22px;
-  height: 22px;
-  fill: ${GP_PRIMARY};
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  &[data-open="true"] {
-    fill: ${GP_DARK};
-    transform: rotate(90deg);
-  }
-`;
-// ── Layout ──
-export const hubContainerCss = css `
-  position: fixed;
-  bottom: 64px;
-  left: 16px;
-  z-index: 900;
-  display: flex;
-  align-items: flex-end;
-  gap: 6px;
-`;
-export const mainMenuCss = css `
-  position: relative;
-  width: 200px;
-  background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  border-radius: 12px;
-  box-shadow:
-    0 12px 40px rgba(0, 0, 0, 0.5),
-    0 0 0 1px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(159, 226, 247, 0.05);
-  animation: ${slideUp} 0.2s ease-out;
-  font-family: 'Mulish', sans-serif;
-  overflow: hidden;
-`;
-export const subPanelCss = css `
-  width: 320px;
-  max-height: calc(100vh - 80px);
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  border-radius: 12px;
-  box-shadow:
-    0 12px 40px rgba(0, 0, 0, 0.5),
-    0 0 0 1px rgba(0, 0, 0, 0.3),
-    inset 0 1px 0 rgba(159, 226, 247, 0.05);
-  animation: ${slideRight} 0.15s ease-out;
-  font-family: 'Mulish', sans-serif;
-  overflow: hidden;
-`;
-export const subPanelHeaderCss = css `
-  padding: 10px 16px;
-  border-bottom: 1px solid rgba(40, 184, 206, 0.15);
-  background: rgba(40, 184, 206, 0.04);
-  flex-shrink: 0;
-`;
-export const subPanelTitleCss = css `
-  font-size: 12px;
-  font-weight: 800;
-  color: #5a8a98;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-`;
-export const subPanelContentCss = css `
-  display: flex;
-  flex-direction: column;
-  padding: 6px;
-  gap: 2px;
-  overflow-y: auto;
-  flex: 1;
-  min-height: 0;
-`;
-// ── Panel header ──
-export const panelHeaderCss = css `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border-bottom: 1px solid rgba(40, 184, 206, 0.15);
-  background: rgba(40, 184, 206, 0.04);
-`;
-export const headerLogoCss = css `
-  width: 18px;
-  height: 18px;
-  fill: ${GP_ACCENT};
-  flex-shrink: 0;
-`;
-export const panelTitleCss = css `
-  font-size: 14px;
-  font-weight: 800;
-  color: #e0f0f4;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  flex: 1;
-`;
-export const panelBadgeCss = css `
-  font-size: 9px;
-  font-weight: 800;
-  padding: 2px 6px;
-  border-radius: 4px;
-  background: rgba(40, 184, 206, 0.15);
-  color: ${GP_PRIMARY};
-  letter-spacing: 0.1em;
-`;
-// ── Menu items ──
-export const menuListCss = css `
-  display: flex;
-  flex-direction: column;
-  padding: 6px;
-  gap: 2px;
-`;
-export const menuItemCss = css `
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.15s;
-  font-family: inherit;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.08);
-  }
-`;
-export const menuItemActiveCss = css `
-  background: rgba(40, 184, 206, 0.12);
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 3px;
-    height: 18px;
-    border-radius: 0 3px 3px 0;
-    background: ${GP_PRIMARY};
-  }
-`;
-export const menuItemIconCss = css `
-  font-size: 15px;
-  color: ${GP_PRIMARY};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  background: rgba(40, 184, 206, 0.08);
-  flex-shrink: 0;
-`;
-export const menuItemLabelCss = css `
-  font-size: 13px;
-  font-weight: 700;
-  color: #e0f0f4;
-  flex: 1;
-`;
-export const menuChevronCss = css `
-  font-size: 10px;
-  color: #3a6070;
-`;
-// ── Tool buttons ──
-export const devToolBtnCss = css `
-  position: relative;
-  display: grid;
-  grid-template-columns: 28px 1fr;
-  grid-template-rows: auto auto;
-  align-items: center;
-  gap: 0 10px;
-  padding: 10px 12px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  transition: background 0.15s;
-  animation: ${toolReveal} 0.25s ease-out backwards;
-  font-family: inherit;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.08);
-  }
-  &:active {
-    background: rgba(40, 184, 206, 0.14);
-  }
-`;
-export const toolBtnActiveCss = css `
-  background: rgba(40, 184, 206, 0.1);
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 8px;
-    bottom: 8px;
-    width: 3px;
-    border-radius: 0 3px 3px 0;
-    background: ${GP_PRIMARY};
-  }
-`;
-export const devToolIconCss = css `
-  grid-row: 1 / -1;
-  font-size: 15px;
-  color: ${GP_PRIMARY};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  background: rgba(40, 184, 206, 0.08);
-`;
-export const devToolLabelCss = css `
-  font-size: 14px;
-  font-weight: 700;
-  color: #e0f0f4;
-  line-height: 1.2;
-`;
-export const devToolDescCss = css `
-  font-size: 12px;
-  color: #5a8a98;
-  line-height: 1.2;
-`;
-export const activeIndicatorCss = css `
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: ${GP_PRIMARY};
-  box-shadow: 0 0 6px rgba(40, 184, 206, 0.5);
-`;
-export const dividerCss = css `
-  height: 1px;
-  margin: 4px 12px;
-  background: rgba(40, 184, 206, 0.1);
-`;
-// ── Inline controls ──
-export const inlineRowCss = css `
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 6px;
-`;
-export const stepBtnCss = css `
-  width: 26px;
-  height: 26px;
-  border-radius: 5px;
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  background: rgba(40, 184, 206, 0.06);
-  color: ${GP_PRIMARY};
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: inherit;
-  transition: all 0.15s;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.14);
-    border-color: rgba(40, 184, 206, 0.4);
-  }
-`;
-export const numberInputCss = css `
-  width: 48px;
-  height: 26px;
-  border-radius: 5px;
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  background: rgba(0, 0, 0, 0.3);
-  color: #e0f0f4;
-  font-size: 13px;
-  font-weight: 700;
-  text-align: center;
-  font-family: inherit;
-  font-variant-numeric: tabular-nums;
-
-  &:focus {
-    outline: none;
-    border-color: ${GP_PRIMARY};
-    box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
-  }
-
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
-export const textInputCss = css `
-  flex: 1;
-  height: 26px;
-  border-radius: 5px;
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  background: rgba(0, 0, 0, 0.3);
-  color: #e0f0f4;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 0 8px;
-  font-family: inherit;
-
-  &::placeholder {
-    color: #3a6070;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: ${GP_PRIMARY};
-    box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
-  }
-`;
-export const goBtnCss = css `
-  height: 26px;
-  padding: 0 12px;
-  border-radius: 5px;
-  border: 1px solid rgba(40, 184, 206, 0.35);
-  background: rgba(40, 184, 206, 0.15);
-  color: ${GP_PRIMARY};
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  margin-left: auto;
-  font-family: inherit;
-  transition: all 0.15s;
-  flex-shrink: 0;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.25);
-    border-color: rgba(40, 184, 206, 0.5);
-  }
-`;
-export const playerBtnCss = css `
-  height: 26px;
-  padding: 0 10px;
-  border-radius: 5px;
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  background: rgba(40, 184, 206, 0.06);
-  color: #5a8a98;
-  font-size: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  font-family: inherit;
-  transition: all 0.15s;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.14);
-    border-color: rgba(40, 184, 206, 0.4);
-    color: #e0f0f4;
-  }
-`;
-export const playerBtnActiveCss = css `
-  background: rgba(40, 184, 206, 0.2);
-  border-color: ${GP_PRIMARY};
-  color: ${GP_PRIMARY};
-`;
-// ── Save/Load styles ──
-export const savedListCss = css `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 0 8px;
-`;
-export const savedEntryCss = css `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 5px 8px;
-  border-radius: 5px;
-  background: rgba(40, 184, 206, 0.04);
-  border: 1px solid rgba(40, 184, 206, 0.08);
-`;
-export const savedLabelCss = css `
-  font-size: 12px;
-  font-weight: 600;
-  color: #8ab8c8;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  margin-right: 8px;
-`;
-export const savedActionsCss = css `
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-`;
-export const smallBtnCss = css `
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  background: rgba(40, 184, 206, 0.08);
-  color: ${GP_PRIMARY};
-  font-size: 10px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: inherit;
-  transition: all 0.15s;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.2);
-    border-color: rgba(40, 184, 206, 0.4);
-  }
-`;
-export const smallBtnDangerCss = css `
-  &:hover {
-    background: rgba(220, 60, 60, 0.2);
-    border-color: rgba(220, 60, 60, 0.4);
-    color: #dc3c3c;
-  }
-`;
-// ── Backdrop ──
-export const backdropCss = css `
-  position: fixed;
-  inset: 0;
-  z-index: 899;
-`;
-// ── Paste Modal ──
-export const modalBackdropCss = css `
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(2px);
-`;
-export const modalCss = css `
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1001;
-  width: min(700px, 90vw);
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(170deg, #0f2035 0%, ${GP_SURFACE} 100%);
-  border: 1px solid rgba(40, 184, 206, 0.3);
-  border-radius: 12px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
-  font-family: 'Mulish', sans-serif;
-  animation: ${modalFadeIn} 0.2s ease-out;
-`;
-export const modalHeaderCss = css `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-  border-bottom: 1px solid rgba(40, 184, 206, 0.15);
-  background: rgba(40, 184, 206, 0.04);
-  border-radius: 12px 12px 0 0;
-`;
-export const modalTitleCss = css `
-  font-size: 14px;
-  font-weight: 800;
-  color: #e0f0f4;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-`;
-export const modalCloseBtnCss = css `
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 6px;
-  background: rgba(40, 184, 206, 0.08);
-  color: #5a8a98;
-  font-size: 12px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.15s;
-
-  &:hover {
-    background: rgba(220, 60, 60, 0.2);
-    color: #dc3c3c;
-  }
-`;
-export const modalBodyCss = css `
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-height: 0;
-`;
-export const modalTextareaCss = css `
-  width: 100%;
-  min-height: 100px;
-  border-radius: 8px;
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  background: rgba(0, 0, 0, 0.4);
-  color: #e0f0f4;
-  font-size: 13px;
-  font-weight: 500;
-  padding: 12px;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  resize: vertical;
-  line-height: 1.5;
-
-  &::placeholder {
-    color: #3a6070;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: ${GP_PRIMARY};
-    box-shadow: 0 0 0 2px rgba(40, 184, 206, 0.15);
-  }
-`;
-export const jsonPreviewCss = css `
-  border-radius: 8px;
-  border: 1px solid rgba(40, 184, 206, 0.15);
-  background: rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-`;
-export const jsonPreviewLabelCss = css `
-  font-size: 10px;
-  font-weight: 800;
-  color: #3a6070;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  padding: 6px 12px;
-  border-bottom: 1px solid rgba(40, 184, 206, 0.08);
-`;
-export const jsonPreviewCodeCss = css `
-  padding: 12px;
-  margin: 0;
-  font-size: 12px;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  line-height: 1.6;
-  color: #8ab8c8;
-  max-height: 300px;
-  overflow-y: auto;
-  white-space: pre;
-  tab-size: 2;
-`;
-export const pasteErrorCss = css `
-  font-size: 12px;
-  font-weight: 700;
-  color: #dc3c3c;
-  padding: 6px 10px;
-  border-radius: 6px;
-  background: rgba(220, 60, 60, 0.1);
-  border: 1px solid rgba(220, 60, 60, 0.2);
-`;
-export const modalFooterCss = css `
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px;
-  border-top: 1px solid rgba(40, 184, 206, 0.15);
-`;
-export const modalCancelBtnCss = css `
-  height: 32px;
-  padding: 0 16px;
-  border-radius: 6px;
-  border: 1px solid rgba(40, 184, 206, 0.25);
-  background: transparent;
-  color: #5a8a98;
-  font-size: 13px;
-  font-weight: 700;
-  cursor: pointer;
-  font-family: inherit;
-  transition: all 0.15s;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.08);
-    color: #e0f0f4;
-  }
-`;
-export const modalLoadBtnCss = css `
-  height: 32px;
-  padding: 0 20px;
-  border-radius: 6px;
-  border: 1px solid rgba(40, 184, 206, 0.4);
-  background: rgba(40, 184, 206, 0.2);
-  color: ${GP_PRIMARY};
-  font-size: 13px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  cursor: pointer;
-  font-family: inherit;
-  transition: all 0.15s;
-
-  &:hover {
-    background: rgba(40, 184, 206, 0.35);
-    border-color: ${GP_PRIMARY};
-  }
-`;
-// ── JSON syntax colors ──
-export const jsonKeyCss = css `
-  color: ${GP_ACCENT};
-`;
-export const jsonStringCss = css `
-  color: #8bbb6a;
-`;
-export const jsonBoolCss = css `
-  color: #d4872a;
-`;
-export const jsonNumCss = css `
-  color: #c4a0e8;
-`;
-export const jsonPunctCss = css `
-  color: #5a6a78;
-`;
-export const jsonErrorTextCss = css `
-  color: #dc3c3c;
-`;
-// ── Flash ──
-export const flashCss = css `
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  margin-bottom: 8px;
-  padding: 6px 14px;
-  font-size: 12px;
-  font-weight: 700;
-  color: ${GP_PRIMARY};
-  text-align: center;
-  background: linear-gradient(145deg, ${GP_SURFACE}, ${GP_DARK});
-  border: 1px solid rgba(40, 184, 206, 0.3);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  white-space: nowrap;
-  pointer-events: none;
-  animation: ${flashFade} 1.5s ease-out forwards;
-`;
-// ── Game Options toggles ──
-export const toggleRowCss = css `
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 4px;
-  padding: 4px 0;
-  cursor: pointer;
-`;
-export const checkboxCss = css `
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  border: 1px solid rgba(40, 184, 206, 0.35);
-  background: rgba(0, 0, 0, 0.3);
-  cursor: pointer;
-  flex-shrink: 0;
-  position: relative;
-  transition: all 0.15s;
-
-  &:checked {
-    background: rgba(40, 184, 206, 0.2);
-    border-color: ${GP_PRIMARY};
-  }
-
-  &:checked::after {
-    content: '\u2713';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 11px;
-    color: ${GP_PRIMARY};
-    font-weight: 700;
-  }
-
-  &:hover {
-    border-color: rgba(40, 184, 206, 0.5);
-  }
-`;
-export const toggleLabelCss = css `
-  font-size: 12px;
-  font-weight: 600;
-  color: #5a8a98;
-`;
-//# sourceMappingURL=DevToolsStyles.js.map