chess-analysis-board/dist/chess-analysis-board.css

A comprehensive chess analysis board React component with move navigation, variation support, PGN import/export, and customizable keyboard shortcuts

.analysis-board-container{display:flex;justify-content:center;align-items:flex-start;padding:20px;font-family:sans-serif;gap:20px}.analysis-board{width:60vw;max-width:600px}.move-history{width:55vw;max-width:650px;border:1px solid #ccc;border-radius:5px;padding:10px;height:60vw;max-height:600px;display:flex;flex-direction:column}.move-history h2{margin-top:0;padding-bottom:10px;border-bottom:1px solid #eee}.moves-list{font-size:14px;line-height:1.6;flex:1;overflow-y:auto}.move-row{display:flex;align-items:baseline;padding:2px 0}.move-number{flex-basis:35px;flex-shrink:0;color:#777;text-align:right;padding-right:5px}.move-pair{flex-basis:50%;display:block;line-height:1.5}.move-group{display:inline}.move-wrapper{display:inline-block;margin-right:4px}.move{display:inline-block;font-weight:600;padding:2px 4px;border-radius:4px;cursor:pointer}.move:hover{background-color:#f0f0f0}.selected-move{background-color:#bde0ff}.variations-block{margin-top:4px;width:100%}.variation-line{display:block;background-color:#f8f8f8;padding:6px 12px;margin-bottom:2px;border-left:3px solid #ddd;border-radius:3px;color:#555;font-weight:400;width:100%;box-sizing:border-box}.variation-line .move{font-weight:500;color:#666}.variation-line .move-number{color:#888}.variation-line.depth-2{margin-left:20px;background-color:#f0f0f0;border-left-color:#bbb}.variation-line.depth-3{margin-left:40px;background-color:#e8e8e8;border-left-color:#999}.sub-variations{display:block;margin-top:4px}.sub-variations .variations-block{display:block;margin-top:0}.sub-variations .variation-line{display:block;margin-bottom:2px;margin-left:20px}.inline-comment{color:#777;font-style:italic;margin-left:4px}.comment-row{padding:0 0 5px}.comment{color:#555;font-style:italic;display:block;padding-left:10px}.empty-move{color:#999}.comment-box{margin-top:20px;width:100%}.comment-box h3{margin-top:0}.comment-box textarea{width:100%;box-sizing:border-box;min-height:80px;border-radius:4px;border:1px solid #ccc;padding:8px;font-family:sans-serif;font-size:1em}.fen-display{width:90vw;max-width:940px;margin:20px auto;padding:10px;border:1px solid #eee;border-radius:5px;background-color:#f0f8ff}.fen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.fen-header h3{margin:0;color:#333}.fen-input-container{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}.fen-textarea{flex:1;border:1px solid #ccc;border-radius:4px;padding:8px;font-family:monospace;font-size:14px;resize:vertical;min-height:45px}.fen-button{background-color:#4a90e2;color:#fff;border:1px solid #4a90e2;border-radius:4px;padding:8px 12px;cursor:pointer;font-weight:500;white-space:nowrap}.fen-button:hover{background-color:#357abd;border-color:#357abd}.load-fen-button{align-self:stretch;min-height:45px}.pgn-display{width:90vw;max-width:940px;margin:20px auto;padding:10px;border:1px solid #eee;border-radius:5px;background-color:#f9f9f9}.pgn-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.pgn-header h3{margin:0}.pgn-textarea-container{position:relative;display:flex;align-items:stretch}.pgn-textarea{width:100%;box-sizing:border-box;min-height:120px;border:1px solid #ccc;border-radius:4px;padding:8px 40px 8px 8px;font-family:monospace;font-size:14px;resize:vertical}.pgn-copy-icon{position:absolute;top:8px;right:8px;background:none;border:none;cursor:pointer;padding:4px;border-radius:3px;opacity:.6;transition:opacity .2s,background-color .2s;display:flex;align-items:center;justify-content:center}.pgn-copy-icon:hover{opacity:1;background-color:#0000000d}.copy-icon-svg{width:16px;height:16px;color:#666}.copy-status{position:absolute;top:8px;right:40px;background-color:#4caf50;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-5px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}.pgn-button{background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px;padding:5px 10px;cursor:pointer}.pgn-button:hover{background-color:#e0e0e0}.load-pgn-button{margin-top:10px;width:100%;padding:10px;font-weight:700}.context-menu{position:fixed;z-index:1000;background-color:#fff;border:1px solid #ccc;border-radius:5px;box-shadow:2px 2px 5px #00000026;padding:5px 0}.context-menu-item{padding:8px 15px;cursor:pointer}.context-menu-item:hover{background-color:#f0f0f0}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.settings-modal{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000004d;width:90%;max-width:500px;max-height:80vh;overflow-y:auto}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee}.settings-header h2{margin:0;color:#333}.settings-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.settings-close:hover{color:#333}.settings-content{padding:20px}.settings-section{margin-bottom:30px}.settings-section h3{margin:0 0 15px;color:#444;font-size:16px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:8px 0}.shortcut-item label{font-weight:500;color:#555}.shortcut-item input{width:40px;height:30px;text-align:center;border:1px solid #ccc;border-radius:4px;font-size:14px;font-weight:700}.shortcut-item input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.shortcut-display{display:inline-block;width:70px;height:30px;line-height:30px;text-align:center;border:1px solid #ccc;border-radius:4px;background-color:#f5f5f5;color:#666;font-size:14px;font-weight:700}.checkbox-input{width:20px;height:20px;margin:0;cursor:pointer}.checkbox-input:focus{outline:2px solid #4a90e2;outline-offset:2px}.board-orientation{font-weight:500;color:#4a90e2}.settings-footer{border-top:1px solid #eee;padding-top:15px;margin-top:20px}.settings-footer p{margin:0;color:#666;font-size:14px}.branch-selection{padding:15px 0 0;border-top:1px solid #eee;background-color:#fff;flex-shrink:0}.branch-selection h4{margin:0 0 10px}.branch-selection button{margin-right:5px;margin-bottom:5px;background-color:#4a90e2;color:#fff;border:1px solid #4a90e2;border-radius:4px;padding:5px 10px;cursor:pointer;font-weight:500}.branch-selection button:hover{background-color:#357abd;border-color:#357abd}.analysis-board-container.embedded-mode{width:100%;max-width:none;padding:10px;gap:15px;flex-wrap:wrap}.analysis-board-container.embedded-mode .analysis-board{width:100%;max-width:500px;flex:1;min-width:400px}.analysis-board-container.embedded-mode .move-history{width:100%;max-width:500px;height:400px;max-height:none;flex:1;min-width:400px}.fen-display.embedded-mode,.pgn-display.embedded-mode{width:100%;max-width:none;margin:10px 0}@media (max-width: 900px){.analysis-board-container.embedded-mode{flex-direction:column;align-items:center}.analysis-board-container.embedded-mode .analysis-board,.analysis-board-container.embedded-mode .move-history{width:100%;max-width:600px;min-width:300px}}.analysis-board-container.standalone-mode .analysis-board{width:60vw;max-width:600px}.analysis-board-container.standalone-mode .move-history{width:55vw;max-width:650px;height:60vw;max-height:600px}.fen-display.standalone-mode,.pgn-display.standalone-mode{width:90vw;max-width:940px}