Spaces:
Running
Running
| @font-face { | |
| font-family: "Caveat Brush"; | |
| font-style: normal; | |
| font-weight: 400; | |
| font-display: swap; | |
| src: url(https://fonts.gstatic.com/s/caveatbrush/v11/EYq0maZfwr9S9-ETZc3fKXtMWw.ttf) format("truetype"); | |
| } | |
| body { | |
| background-color: rgba(var(--active-background-color), 1); | |
| /* background-image: radial-gradient(circle, rgba(var(--active-background-color), 1) 0%, color-mix(in srgb, rgba(var(--active-background-color), 1) 60%, black) 100%); */ | |
| background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); | |
| color: #222; | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| max-height: 100vh; | |
| width: 100vw; | |
| max-width: 100vw; | |
| overflow: hidden; | |
| transition: background-color 0.6s ease-out; | |
| } | |
| #game-container { | |
| padding: 20px; | |
| border-radius: 8px; | |
| text-align: center; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .buttons { | |
| position: relative; | |
| z-index: 20; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 4px; | |
| margin-top: 15px; | |
| #new-game { | |
| padding: 10px 20px; | |
| background-color: #555; | |
| border: none; | |
| color: #fff; | |
| font-size: 16px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| #new-game:hover { | |
| background-color: #777; | |
| } | |
| } | |
| #status { | |
| margin-bottom: 10px; | |
| font-family: "Caveat Brush", serif; | |
| font-size: 3rem; | |
| font-weight: 600; | |
| color: color-mix(in srgb, rgba(var(--active-background-color), 1) 30%, black); | |
| } | |
| #board { | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| gap: 2px; | |
| margin: 0; | |
| background-color: rgba(68, 68, 68, 1); | |
| border: none; | |
| border-radius: 0.35rem; | |
| overflow: hidden; | |
| padding: 8px; | |
| width: 90%; | |
| max-height: 90vw; | |
| } | |
| @media screen and (orientation: landscape) { | |
| #game-container { | |
| width: 100vh; | |
| max-width: 100vh; | |
| aspect-ratio: 4 / 3; | |
| } | |
| #board { | |
| display: grid; | |
| grid-template-columns: repeat(8, 1fr); | |
| gap: 2px; | |
| width: 70vh; | |
| max-width: 70vh; | |
| } | |
| } | |
| @media screen and (orientation: portrait) { | |
| #game-container { | |
| width: 90vw; | |
| max-width: 90vw; | |
| aspect-ratio: 4 / 3; | |
| } | |
| } | |
| .cell { | |
| width: 100%; | |
| aspect-ratio: 1 / 1; | |
| box-sizing: border-box; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .light { | |
| background-color: #666; | |
| } | |
| .dark { | |
| background-color: rgb(68, 68, 68); | |
| } | |
| .cell.highlight:after { | |
| background-image: repeating-linear-gradient(-45deg, rgba(var(--active-background-color), 0.1), rgba(var(--active-background-color), 0.1) 1rem, rgba(var(--active-background-color), 0.4) 1rem, rgba(var(--active-background-color), 0.4) 2rem); | |
| background-size: 200% 200%; | |
| animation: barberpole 10s linear infinite; | |
| position: absolute; | |
| content: ""; | |
| width: 80%; | |
| height: 80%; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| border-radius: 50%; | |
| opacity: 0.4; | |
| } | |
| @keyframes barberpole { | |
| 100% { | |
| background-position: 100% 100%; | |
| } | |
| } | |
| .piece { | |
| width: 80%; | |
| height: 80%; | |
| border-radius: 50%; | |
| margin: 0; | |
| position: relative; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: rgba(var(--player-color), 1); | |
| /* border:0.35rem solid rgb(var(--player-color)); */ | |
| box-shadow: 0.2rem 0.2rem 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0 0.2rem inset rgba(0, 0, 0, 0.2); | |
| /* filter: drop-shadow(0px 0px red);*/ | |
| } | |
| .cell.selected .piece { | |
| filter: brightness(0.6); | |
| /* animation-name: pulse; | |
| animation-duration: 1.4s; | |
| animation-timing-function: linear; | |
| animation-iteration-count: infinite; */ | |
| } | |
| .piece.must-capture { | |
| /* filter: brightness(0.6); */ | |
| animation-name: pulse; | |
| animation-duration: 1.4s; | |
| animation-timing-function: linear; | |
| animation-iteration-count: infinite; | |
| } | |
| /* .piece::after { | |
| position: absolute; | |
| content: ""; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| margin: 0; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| /* border:0.35rem var(--border-style) var(--border-color); * / | |
| animation-duration: 6s; | |
| animation-timing-function: linear; | |
| animation-iteration-count: infinite; | |
| } | |
| .piece.spin-ani::after { | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| border: 0.35rem var(--border-style) var(--border-color); | |
| animation-name: spin; | |
| } */ | |
| .piece.king { | |
| background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><path fill='rgba(68,68,68,0.5)' d='M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6l277.2 0c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z'/></svg>"); | |
| background-size: 50%; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| #winMessage { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background-color: #222; | |
| padding: 20px 30px; | |
| border: 8px solid rgb(68, 68, 68); | |
| color: rgb(68, 68, 68); | |
| border-radius: 8px; | |
| font-size: 24px; | |
| display: none; | |
| z-index: 10; | |
| cursor: pointer; | |
| } | |
| #setPlayerNamesWrapper { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 40%; | |
| aspect-ratio: 16 / 9; | |
| transform: translate(-50%, -50%); | |
| border-radius: 8px; | |
| padding: 20px 30px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 0; | |
| background-image: url(http://62.68.75.171/themes/prismify-bootstrap-starter-kit/assets/images/dame_header_image.png); | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| background-position: center; | |
| #setPlayerNamesInputs { | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| input, | |
| label { | |
| font-family: "Caveat Brush", serif; | |
| font-size: 2rem; | |
| font-weight: 600; | |
| border-radius: 4px; | |
| border-width: 8px; | |
| border-style: solid; | |
| border-color: transparent; | |
| background-color: transparent; | |
| } | |
| #inputPlayerName1 { | |
| padding: 10px 20px; | |
| background-color: rgb(var(--player1-color)); | |
| border-color: rgb(var(--player1-color)); | |
| color: color-mix(in srgb, rgba(var(--player1-color), 1) 20%, rgb(14, 14, 64)); | |
| transform: rotate(0.2deg); | |
| margin-left: 4px; | |
| margin-right: -4px; | |
| } | |
| #modeSelect { | |
| padding: 10px 20px; | |
| background-color: rgb(var(--player2-color)); | |
| border-color: rgb(var(--player2-color)); | |
| transform: rotate(-0.2deg); | |
| border-radius: 4px; | |
| border-width: 8px; | |
| margin-top: -8px; | |
| max-width: 60%; | |
| margin-left: 60px; | |
| #inputPlayerName2 { | |
| color: color-mix(in srgb, rgba(var(--player2-color), 1) 20%, rgb(38, 7, 7)); | |
| text-align: right; | |
| max-width: calc(100% - 60px); | |
| } | |
| #cpuToggle { | |
| display: none; | |
| } | |
| label { | |
| padding: 10px 20px; | |
| background-color: rgb(var(--player2-color)); | |
| border: 8px solid rgb(var(--player2-color)); | |
| color: #555; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.3s ease-in-out; | |
| background-repeat: no-repeat; | |
| background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(81,40,42,1)' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'/></svg>"); | |
| } | |
| label:has(#cpuToggle:checked) { | |
| background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='rgba(81,40,42,1)' d='M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z'/></svg>"); | |
| } | |
| } | |
| input:focus { | |
| outline: none; | |
| } | |
| span#vs { | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -10px; | |
| font-family: "Caveat Brush", serif; | |
| font-size: 2rem; | |
| font-weight: 600; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| color: rgba(255, 255, 255, 1); | |
| text-shadow: #444 2px 2px 0px, #444 2px -2px 0px, #444 -2px 2px 0px, #444 -2px -2px 0px, #444 2px 0px 0px, #444 0px 2px 0px, #444 -2px 0px 0px, #444 0px -2px 0px; | |
| } | |
| } | |
| #savePlayerNames { | |
| padding: 10px 20px; | |
| background-color: #555; | |
| border: none; | |
| color: #fff; | |
| font-size: 16px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-top: 12px; | |
| } | |
| } | |
| #setPlayerNamesWrapperBackdrop { | |
| position: absolute; | |
| content: ""; | |
| width: 100vw; | |
| height: 100vh; | |
| top: 0px; | |
| left: 0; | |
| backdrop-filter: blur(10px); | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| filter: brightness(1); | |
| } | |
| 50% { | |
| filter: brightness(0.4); | |
| } | |
| 100% { | |
| filter: brightness(1); | |
| } | |
| } | |
| @keyframes spin { | |
| from { | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| } | |
| to { | |
| transform: translate(-50%, -50%) rotate(360deg); | |
| } | |
| } | |