@alepot55/chessboardjs 2.2.0 → 2.2.2

package/dist/chessboard.css

@@ -0,0 +1,228 @@
+/* Main stylesheet for Chessboard.js */
+@import './board.css';
+@import './pieces.css';
+@import './animations.css';
+:root {
+    --dimBoard: 600px;
+    --pieceRatio: 0.9;
+    --square-size: calc(var(--dimBoard) / 8);
+
+    --blackSquare: #b58863;
+    --whiteSquare: #f0d9b5;
+    --highlightSquare: yellow;
+    --selectedSquareWhite: #ababaa;
+    --selectedSquareBlack: #ababaa;
+    --movedSquareBlack: #e9e981;
+    --movedSquareWhite: #f1f1a0;
+    --choiceSquare: white;
+    --coverSquare: black;
+    --hintColor: #ababaa;
+}
+
+.board {
+    display: grid;
+    grid-template: repeat(8, 1fr) / repeat(8, 1fr);
+    width: var(--dimBoard);
+    height: var(--dimBoard);
+    /* Enable hardware acceleration for better performance */
+    transform: translateZ(0);
+    will-change: auto;
+}
+
+.square {
+    width: var(--square-size);
+    height: var(--square-size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.piece {
+    position: absolute;
+    z-index: 10;
+    width: calc(var(--square-size) * var(--pieceRatio));
+    height: calc(var(--square-size) * var(--pieceRatio));
+
+    /* No selection */
+    -webkit-user-select: none;
+    /* Safari */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* IE10+/Edge */
+    user-select: none;
+    /* Standard */
+}
+
+.choicable {
+    z-index: 50;
+}
+
+.hint {
+    background: var(--hintColor);
+    width: calc(calc(var(--dimBoard) / 8) / 3.5);
+    height: calc(calc(var(--dimBoard) / 8) / 3.5);
+    position: absolute;
+    z-index: 5;
+    border-radius: 50%;
+    opacity: 0.8;
+}
+
+.catchable {
+    width: calc(calc(var(--dimBoard) / 8) * 0.9);
+    height: calc(calc(var(--dimBoard) / 8) * 0.9);
+}
+
+.blackSquare {
+    background: var(--blackSquare);
+}
+
+.whiteSquare {
+    background: var(--whiteSquare);
+}
+
+.selectedSquareWhite {
+    background: var(--selectedSquareWhite);
+}
+
+.selectedSquareBlack {
+    background: var(--selectedSquareBlack);
+}
+
+.movedSquareBlack {
+    background: var(--movedSquareBlack);
+}
+
+.movedSquareWhite {
+    background: var(--movedSquareWhite);
+}
+
+.choice {
+    background: var(--choiceSquare);
+    z-index: 30;
+}
+
+.cover {
+    background: var(--coverSquare);
+    opacity: 0.5;
+    z-index: 25;
+}
+
+.highlighted {
+    box-shadow: inset 0 0 10px var(--highlightSquare);
+}/* Piece-specific styles */
+.piece {
+  position: absolute;
+  cursor: pointer;
+  /* Solo transizioni specifiche, non "all" */
+  transition: opacity var(--fade-time, 150ms) var(--fade-animation, ease);
+  z-index: 10;
+  /* Hint al browser per ottimizzazioni */
+  will-change: auto;
+}
+
+.piece.dragging {
+  z-index: 100;
+  /* Disabilita completamente le transizioni durante il drag */
+  transition: none !important;
+  /* Hint per ottimizzazione durante drag */
+  will-change: left, top, transform;
+  /* Mantiene le dimensioni originali del pezzo durante il drag */
+  width: calc(var(--square-size) * var(--pieceRatio)) !important;
+  height: calc(var(--square-size) * var(--pieceRatio)) !important;
+  /* Assicura che il pezzo mantenga le proporzioni corrette */
+  box-sizing: border-box;
+}
+
+.piece.fading {
+  opacity: 0;
+  transition: opacity var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.piece.moving {
+  /* Solo transizione per transform, non position */
+  transition: transform var(--move-time, 200ms) var(--move-animation, ease);
+}
+
+/* Piece replacement during promotion - no transitions to avoid flickering */
+.piece.replacing {
+  transition: none !important;
+  opacity: 1;
+  transform: none;
+}
+
+/* Piece transformation during promotion - smooth scaling animation */
+.piece.transforming {
+  transition: none !important;
+  transform-origin: center center;
+  will-change: transform, opacity;
+  z-index: 50;
+}
+
+/* Subtle bounce effect after transformation */
+.piece.transform-complete {
+  animation: transformBounce 0.4s ease-out;
+}
+
+@keyframes transformBounce {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+/* Piece sizing */
+.piece img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  /* Previene conflitti di drag dell'immagine */
+  pointer-events: none;
+  /* Migliore rendering */
+  image-rendering: crisp-edges;
+}
+/* Animation styles */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slideIn {
+  from { transform: translateY(-10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes bounce {
+  0%, 20%, 53%, 80%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  40%, 43% {
+    transform: translate3d(0, -5px, 0);
+  }
+  70% {
+    transform: translate3d(0, -3px, 0);
+  }
+  90% {
+    transform: translate3d(0, -1px, 0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.fade-out {
+  animation: fadeOut var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.slide-in {
+  animation: slideIn var(--fade-time, 150ms) var(--fade-animation, ease);
+}
+
+.bounce {
+  animation: bounce 1s ease;
+}