body { margin: 0; font-size: 14px; font-family: sans-serif; background: #f7f7f7; } html, body { overflow: hidden; height: 100%; } #container { display: flex; height: 100vh; } #leftColumn { width: 260px; display: flex; flex-direction: column; gap: 12px; padding: 10px; background: #7a7a7a; border-right: 1px solid #ccc; } .rogo{ font-size: 12px; color: #6d6d6d; } a { font-size: 14px; color: #6d6d6d; text-decoration: none; } #thumbPanel { width: 220px; display: flex; flex-direction: column; gap: 12px; padding: 10px; text-align: center; background: #e2effd; border-right: 1px solid #f7f7f7; overflow-y: auto; font-size: 20px; color: #3fff18; text-shadow: 1px 1px 3px #000; font-weight: bold; scrollbar-width: none; } #thumbPanel::-webkit-scrollbar { display: none; } #selectedColumn { background-image: url("s-brick008.gif"); width: 130px; display: flex; flex-direction: column; object-fit: contain; border-right: 1px solid #719dee; font-size: 20px; text-align: center; color: #3fff18; text-shadow: 1px 1px 3px #000; font-weight: bold; padding: 10px; gap: 12px; } #thumbsContainer { display: grid; grid-template-columns: repeat(3, 70px); gap: 6px; } .thumb img { width: 60px; height: 60px; object-fit: contain; background-color: #b4b4b4; cursor: pointer; border: 2px solid transparent; } .thumb.selected img { outline: 4px solid #ff25a4; opacity: 0.8; } #selectedImagePreview { display: block; padding: 6px; border: 1px solid #719dee; border-radius: 6px; background: #c1d5ff; overflow-y: auto; scrollbar-width: none; } #selectedImagePreview::-webkit-scrollbar { display: none; } #selectedImagePreview img { display: block; width: auto; max-width: 200px; margin: 0 auto; margin-bottom: 10px; } #mainArea { flex: 1; background-image: url("s-brick008.gif"); overflow-y: hidden; padding: 10px; display: flex; flex-direction: column; align-items: center; } .accordion { position: absolute; margin-top: 54px; width: auto; background: #e4e4e4; margin-bottom: 2px; z-index: 10; } .acc-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 8px; background: #a3fdda; color: #5d18ff; font-weight: bold; font-size: 1em; border-radius: 4px; margin-top: 2px; } .acc-icon { display: inline-block; transition: transform 0.35s ease; } .acc-header.open .acc-icon { transform: rotate(90deg); } .acc-body { max-height: 0; overflow: hidden; transition: max-height 0.60s ease; padding: 0 10px; overflow-y: auto; } .acc-body.open { padding: 10px; } #vaseCanvas { background: #fff; border: 1px solid #4d2acc; box-shadow: 0 2px 6px rgba(20, 20, 20, 0.5); margin-top: 125px; position: relative; max-width: 100%; max-height: calc(100vh - 200px); width: auto; height: auto; display: block; margin-left: auto; margin-right: auto; } #downloadBtn { background-color: #0073e6; color: white; border: none; border-radius: 5px; padding: 4px 6px; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease; } button{ background-color: hsl(120, 100%, 78%); color: rgb(31, 31, 31); border: none; border-radius: 5px; padding: 2px 4px; font-size: 1em; cursor: pointer; transition: background-color 0.3s ease; margin-right: 10px; } p{ margin-top: 0px; font-size: 20px; color: #ffe921; text-shadow: 1px 1px 3px #000; font-weight: bold; } .header-message { margin-left: 10px; padding: 2px 6px; background: #ffe9a8; color: #333; border-radius: 4px; font-size: 12px; border: 1px solid #e0c46c; cursor: pointer; display: none; } @media (min-width: 900px) { #container { flex-direction: row; } #thumbPanel { width: 220px; } #mainArea { flex: 1; } } @media (min-width: 600px) and (max-width: 899px) { #container { flex-direction: row; } #thumbPanel { width: 200px; } #selectedColumn { width: 150px; } #mainArea { flex: 1; } } @media (max-width: 599px) { #container { flex-direction: column; height: auto; } #thumbPanel { width: 100%; height: auto; border-right: none; border-bottom: 1px solid #ccc; } #selectedColumn { width: 100%; height: auto; border-right: none; border-bottom: 1px solid #ccc; } #mainArea { width: 100%; height: auto; overflow-y: visible; } #vaseCanvas { width: 100%; height: auto; } } input[type="range"] { -webkit-appearance: none; appearance: none; width: 200px; height: 8px; background: linear-gradient(90deg, #dcdcdc, #bfbfbf); border-radius: 6px; outline: none; cursor: pointer; transition: background 0.25s ease; } input[type="range"]:hover { background: linear-gradient(90deg, #cfcfcf, #b0b0b0); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: #ffffff; border-radius: 50%; border: 2px solid #666; box-shadow: inset 0 0 4px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.3); transition: 0.2s ease; } input[type="range"]::-webkit-slider-thumb:hover { background: #f7f7f7; border-color: #444; } input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.92); } input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: #ffffff; border-radius: 50%; border: 2px solid #666; box-shadow: inset 0 0 4px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.3); transition: 0.2s ease; } input[type="range"]::-moz-range-thumb:hover { background: #f7f7f7; border-color: #444; } input[type="range"]::-moz-range-thumb:active { transform: scale(0.92); } input[type="range"]::-moz-range-track { height: 8px; background: linear-gradient(90deg, #dcdcdc, #bfbfbf); border-radius: 6px; } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 8px 32px 6px 4px; font-size: 14px; border: 1px solid #aaa; border-radius: 6px; background: #e1e3f8; color: #333; cursor: pointer; transition: 0.2s ease; } select:hover { background: #ffffff; border-color: #666; } select:focus { outline: none; border-color: #444; box-shadow: 0 0 0 2px rgba(100,100,100,0.2); } select { background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; } .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; } .popup-window { background: #ffc6f3; color: #2e2e2e; padding: 20px 30px; border: 1px solid #e93333; border-radius: 10px; text-align: center; width: 300px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .popup-buttons { margin-top: 20px; display: flex; justify-content: space-around; } .yes-btn { background: #db322d; color: #fff; padding: 8px 20px; border-radius: 6px; } .no-btn { background: #2dacd3; color: #fff; padding: 8px 20px; border-radius: 6px; } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 20; } .popup.hidden { display: none; } .popup-content { background: #92c1ff; padding: 20px; border: 2px solid #1d6cd3; border-radius: 8px; width: 300px; } .thumbs-grid { display: grid; grid-template-columns: repeat(3, 80px); gap: 8px; } .thumbs-grid img { width: 80px; height: 80px; object-fit: cover; cursor: pointer; } .thumbs-grid { display: grid; grid-template-columns: repeat(3, 100px); gap: 10px; margin-bottom: 15px; } .restore-item { text-align: center; } .restore-thumb { width: 100px; height: 100px; object-fit: cover; cursor: pointer; border: 2px solid #ccc; border-radius: 4px; } .restore-thumb:hover { border-color: #ff6699; } .thumb-delete-btn { margin-top: 4px; padding: 4px 6px; font-size: 12px; background: #ff6666; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .thumb-delete-btn:hover { background: #ff3333; }