314 lines
8.2 KiB
CSS
314 lines
8.2 KiB
CSS
/*!* === nonogram.css (게임 플레이용) === *!*/
|
|
/*body {*/
|
|
/* !* (★ 삭제) font-family, align-items: center*/
|
|
/* -> common_game_theme.css에서 관리합니다.*/
|
|
/* *!*/
|
|
/*}*/
|
|
|
|
/*#board-viewport {*/
|
|
/* position: relative;*/
|
|
/* width: 100%;*/
|
|
/* max-width: 95vw; !* 화면 너비에 좀 더 맞춤 *!*/
|
|
/* margin: 20px auto;*/
|
|
/* !* (★ 핵심 수정) Flexbox로 자식 요소를 중앙 정렬합니다. *!*/
|
|
/* display: flex;*/
|
|
/* justify-content: center; !* 자식 요소를 수평 중앙 정렬 *!*/
|
|
/* align-items: flex-start; !* 위쪽에 정렬 *!*/
|
|
/*}*/
|
|
/*.reveal-img {*/
|
|
/* position: absolute;*/
|
|
/* top: 0;*/
|
|
/* left: 0;*/
|
|
/* width: 100%;*/
|
|
/* height: 100%;*/
|
|
/* opacity: 0; !* Hidden by default *!*/
|
|
/* pointer-events: none; !* Make them unclickable *!*/
|
|
/* transition: opacity 1.5s ease-in-out; !* Fade animation *!*/
|
|
/* transform-origin: top left; !* Align with the game board's scaling *!*/
|
|
/*}*/
|
|
|
|
/*.guide-line-right {*/
|
|
/* border-right: 2px solid #999 !important;*/
|
|
/*}*/
|
|
|
|
/*.guide-line-bottom {*/
|
|
/* border-bottom: 2px solid #999 !important;*/
|
|
/*}*/
|
|
|
|
/*#game-board {*/
|
|
/* display: grid;*/
|
|
/* gap: 1px;*/
|
|
/* background-color: #999;*/
|
|
/* border: 2px solid #333;*/
|
|
/* transform-origin: top;*/
|
|
/*}*/
|
|
/*#game-controls {*/
|
|
/* display: flex;*/
|
|
/* justify-content: space-between;*/
|
|
/* align-items: center;*/
|
|
/* width: 100%;*/
|
|
/* !* (★ 삭제) 아래 속성들은 common_game_theme.css의 #game-controls 셀렉터가 관리합니다.*/
|
|
/* max-width: 500px;*/
|
|
/* margin-bottom: 15px;*/
|
|
/* *!*/
|
|
/* font-size: 1.2em;*/
|
|
/* flex-wrap: wrap;*/
|
|
/* gap: 15px;*/
|
|
|
|
/* !* (★ 참고) common_game_theme에서 이미 background: white, padding, box-shadow 등이 적용된 상태입니다.*/
|
|
/* 이 CSS는 그 내부의 flex 정렬만 담당하게 됩니다.*/
|
|
/* *!*/
|
|
/*}*/
|
|
|
|
/*#mode-selector {*/
|
|
/* display: flex;*/
|
|
/* gap: 5px;*/
|
|
/* border: 1px solid #ccc;*/
|
|
/* border-radius: 8px;*/
|
|
/* padding: 4px;*/
|
|
/* background-color: #f0f0f0;*/
|
|
/*}*/
|
|
|
|
/*#mode-selector label {*/
|
|
/* cursor: pointer;*/
|
|
/* user-select: none;*/
|
|
/*}*/
|
|
|
|
/*#mode-selector span {*/
|
|
/* padding: 8px 15px;*/
|
|
/* border-radius: 5px;*/
|
|
/* display: block;*/
|
|
/* transition: background-color 0.2s, color 0.2s;*/
|
|
/*}*/
|
|
|
|
/*#mode-selector input[type="radio"] {*/
|
|
/* display: none;*/
|
|
/*}*/
|
|
|
|
/*#mode-selector input[type="radio"]:checked + span {*/
|
|
/* background-color: #007bff; !* (★ 참고) 공통 테마의 파란색과 동일하므로 유지 *!*/
|
|
/* color: white;*/
|
|
/* box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);*/
|
|
/*}*/
|
|
/*#hint-btn {*/
|
|
/* padding: 8px 15px;*/
|
|
/* font-weight: bold;*/
|
|
/* cursor: pointer;*/
|
|
/* border-radius: 5px;*/
|
|
/* border: 1px solid #ccc;*/
|
|
/*}*/
|
|
/*#hint-btn:disabled {*/
|
|
/* cursor: not-allowed;*/
|
|
/* opacity: 0.5;*/
|
|
/*}*/
|
|
|
|
/*.col-clues-container, .row-clues-container {*/
|
|
/* display: flex;*/
|
|
/*}*/
|
|
/*.row-clues-container {*/
|
|
/* flex-direction: column;*/
|
|
/*}*/
|
|
|
|
/*.puzzle-grid-container {*/
|
|
/* display: grid;*/
|
|
/* border: 2px solid #333;*/
|
|
/*}*/
|
|
|
|
/*!* nonogram.css의 .clue-cell (게임용) *!*/
|
|
/*.clue-cell {*/
|
|
/* background-color: #f0f0f0;*/
|
|
/* font-weight: bold;*/
|
|
/* font-size: 14px;*/
|
|
/* box-sizing: border-box;*/
|
|
/* display: flex;*/
|
|
/* padding: 5px;*/
|
|
/*}*/
|
|
|
|
/*.row-clue {*/
|
|
/* justify-content: flex-end; !* 힌트 오른쪽 정렬 *!*/
|
|
/* align-items: center;*/
|
|
/*}*/
|
|
|
|
/*.col-clue {*/
|
|
/* justify-content: center; !* 힌트 가운데 정렬 *!*/
|
|
/* align-items: flex-end; !* 힌트 아래쪽 정렬 *!*/
|
|
/* text-align: center;*/
|
|
/* line-height: 1.2; !* 줄 간격 *!*/
|
|
/*}*/
|
|
|
|
/*!* nonogram.css의 .grid-cell (게임용) *!*/
|
|
/*.grid-cell {*/
|
|
/* background-color: #fff;*/
|
|
/* border: 1px solid #ddd;*/
|
|
/* box-sizing: border-box;*/
|
|
/* cursor: pointer;*/
|
|
/*}*/
|
|
|
|
/*!* nonogram.css의 .filled (게임용) *!*/
|
|
/*.grid-cell.filled {*/
|
|
/* background-color: #333;*/
|
|
/*}*/
|
|
|
|
/*.grid-cell.marked::after {*/
|
|
/* content: 'X';*/
|
|
/* color: #ff5c5c;*/
|
|
/* font-weight: bold;*/
|
|
/* font-size: 1.2em;*/
|
|
/* display: flex;*/
|
|
/* justify-content: center;*/
|
|
/* align-items: center;*/
|
|
/* width: 100%;*/
|
|
/* height: 100%;*/
|
|
/*}*/
|
|
|
|
/*.grid-cell.incorrect {*/
|
|
/* background-color: #ffcccc;*/
|
|
/* animation: shake 0.5s;*/
|
|
/*}*/
|
|
/*@keyframes shake {*/
|
|
/* 0%, 100% { transform: translateX(0); }*/
|
|
/* 25% { transform: translateX(-5px); }*/
|
|
/* 75% { transform: translateX(5px); }*/
|
|
/*}*/
|
|
|
|
|
|
/*#result-overlay {*/
|
|
/* position: fixed; !* 화면 전체에 고정 *!*/
|
|
/* top: 0;*/
|
|
/* left: 0;*/
|
|
/* width: 100vw; !* 뷰포트 너비 100% *!*/
|
|
/* height: 100vh; !* 뷰포트 높이 100% *!*/
|
|
/* background-color: rgba(0, 0, 0, 0.75); !* 반투명 검은 배경 *!*/
|
|
/* display: flex;*/
|
|
/* justify-content: center;*/
|
|
/* align-items: center;*/
|
|
/* z-index: 100;*/
|
|
/* opacity: 0;*/
|
|
/* pointer-events: none;*/
|
|
/* transition: opacity 0.3s ease-in-out;*/
|
|
/*}*/
|
|
/*#result-overlay.visible {*/
|
|
/* opacity: 1;*/
|
|
/* pointer-events: auto;*/
|
|
/*}*/
|
|
/*#result-modal {*/
|
|
/* background-color: white;*/
|
|
/* padding: 20px 40px;*/
|
|
/* border-radius: 10px;*/
|
|
/* text-align: center;*/
|
|
/* box-shadow: 0 5px 15px rgba(0,0,0,0.3);*/
|
|
/*}*/
|
|
/*#modal-title {*/
|
|
/* margin-top: 0;*/
|
|
/* font-size: 2.5em;*/
|
|
/*}*/
|
|
/*#modal-buttons button {*/
|
|
/* padding: 10px 20px;*/
|
|
/* margin: 0 10px;*/
|
|
/* font-size: 1em;*/
|
|
/* cursor: pointer;*/
|
|
/* border-radius: 5px;*/
|
|
/* border: 1px solid #ccc;*/
|
|
/* min-width: 120px;*/
|
|
/*}*/
|
|
/*#modal-buttons button.primary {*/
|
|
/* background-color: #4CAF50;*/
|
|
/* color: white;*/
|
|
/* border-color: #4CAF50;*/
|
|
/*}*/
|
|
|
|
/*.hidden {*/
|
|
/* display: none;*/
|
|
/*}*/
|
|
|
|
/*.clue-cell.completed {*/
|
|
/* color: #999; !* 색상을 회색으로 *!*/
|
|
/* text-decoration: line-through; !* 취소선 *!*/
|
|
/*}*/
|
|
|
|
/*.grid-cell.locked {*/
|
|
/* opacity: 0.8; !* 약간 투명하게 *!*/
|
|
/*}*/
|
|
|
|
/*.grid-cell.selecting {*/
|
|
/* background-color: rgba(0, 123, 255, 0.3); !* 반투명 파란색 배경 *!*/
|
|
/* border-color: rgba(0, 123, 255, 0.5);*/
|
|
/*}*/
|
|
|
|
|
|
/*!* === puzzle.css (업로드 미리보기용) - 충돌 해결됨 === *!*/
|
|
|
|
/*#puzzle-container {*/
|
|
/* display: grid;*/
|
|
/* !* We will set grid-template-columns/rows with JS *!*/
|
|
/* grid-gap: 2px;*/
|
|
/* margin-top: 20px;*/
|
|
/* background-color: #333;*/
|
|
/* border: 2px solid #333;*/
|
|
/* width: fit-content;*/
|
|
/*}*/
|
|
|
|
/*!* (★충돌 해결) #puzzle-container 내부의 .grid-cell (미리보기 코너 셀) *!*/
|
|
/*#puzzle-container .grid-cell {*/
|
|
/* width: 25px;*/
|
|
/* height: 25px;*/
|
|
/* background-color: #f0f0f0;*/
|
|
/* text-align: center;*/
|
|
/* line-height: 25px;*/
|
|
/* font-size: 14px;*/
|
|
/* !* nonogram.css의 .grid-cell 스타일과 겹치지 않음 *!*/
|
|
/* cursor: default;*/
|
|
/* border: none;*/
|
|
/*}*/
|
|
|
|
/*!* (★충돌 해결) #puzzle-container 내부의 .clue-cell (미리보기 힌트 셀) *!*/
|
|
/*#puzzle-container .clue-cell {*/
|
|
/* background-color: #cce7ff;*/
|
|
/* display: flex;*/
|
|
/* justify-content: center;*/
|
|
/* align-items: center;*/
|
|
/* padding: 5px;*/
|
|
/* min-height: 25px;*/
|
|
/* font-weight: bold;*/
|
|
/* !* nonogram.css의 .clue-cell 스타일과 겹치지 않음 *!*/
|
|
/* font-size: 14px;*/
|
|
/*}*/
|
|
|
|
/*.solution-cell {*/
|
|
/* width: 25px;*/
|
|
/* height: 25px;*/
|
|
/*}*/
|
|
|
|
/*!* (★충돌 해결) .filled 대신 .solution-cell.filled 사용 *!*/
|
|
/*.solution-cell.filled {*/
|
|
/* background-color: #333;*/
|
|
/*}*/
|
|
|
|
/*!* .empty는 .solution-cell.empty로 사용 (upload.js 기준) *!*/
|
|
/*.solution-cell.empty {*/
|
|
/* background-color: #fff;*/
|
|
/*}*/
|
|
|
|
/*#puzzle-wrapper {*/
|
|
/* position: relative; !* Needed for absolute positioning of children *!*/
|
|
/*}*/
|
|
|
|
/*!* 이 ID는 nonogram.html에서 사용되지 않으므로 충돌 없음 *!*/
|
|
/*#success-animation-container {*/
|
|
/* position: absolute;*/
|
|
/* top: 0;*/
|
|
/* left: 0;*/
|
|
/* width: 100%;*/
|
|
/* height: 100%;*/
|
|
/* pointer-events: none; !* Allows clicking through the container *!*/
|
|
/*}*/
|
|
|
|
/*#success-animation-container img {*/
|
|
/* position: absolute;*/
|
|
/* top: 0;*/
|
|
/* left: 0;*/
|
|
/* width: 100%;*/
|
|
/* height: 100%;*/
|
|
/* opacity: 0; !* Hidden by default *!*/
|
|
/* transition: opacity 1.0s ease-in-out; !* Fade animation *!*/
|
|
/*}*/ |