body { margin: 0; background-image: url("./images/s-brick008.gif"); font-family: system-ui, sans-serif; display: flex; overflow-x: hidden; overflow-y: scroll; scrollbar-width: none; min-height: 100vh; box-sizing: border-box; } body::-webkit-scrollbar { display: none; } .left-panel { flex: 1; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; } .right-panel { width: 230px; border-left: 1px solid #099b29; padding: 10px; box-sizing: border-box; display: flex; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; flex-direction: column; background: #a5a5a5; gap: 8px; } .left-panel, .right-panel { height: 100vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .left-panel::-webkit-scrollbar, .right-panel::-webkit-scrollbar { display: none; } p { color: rgb(5, 88, 5); font-weight: bold; } .accordion .acc-header { background: #e5e4fa; padding: 8px; cursor: pointer; border: 1px solid #ccc; margin-top: 6px; color: rgb(99, 45, 248); font-weight: bold; } .accordion .acc-header:hover { background-color: rgb(207, 243, 248); } .accordion .acc-body { max-height: 0; overflow: hidden; border: 1px solid #ccc; border-top: none; border-radius: 6px; background: #d7f7d4; transition: max-height 0.92s ease; } .acc-header { display: flex; align-items: center; gap: 6px; background: #e5e4fa; padding: 8px; cursor: pointer; border: 1px solid #ccc; margin-top: 6px; color: rgb(99, 45, 248); font-weight: bold; } .acc-icon { display: inline-block; transition: transform 0.3s ease; transform: rotate(0deg); } .acc-header.open .acc-icon { transform: rotate(90deg); } .control-row { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } input[type="number"] { width: 80px; padding: 6px 8px; margin: 8px 0; display: inline-block; border: 1px solid #15680a; border-radius: 4px; box-sizing: border-box; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); transition: 0.3s; } Input[type="text"]{ width: 260px; padding: 6px 8px; margin: 8px 0; display: inline-block; border: 1px solid #15680a; border-radius: 4px; box-sizing: border-box; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); transition: 0.3s; } .preview-area { flex: 1; border: 1px solid #ccc; border-radius: 6px; display: flex; align-items: center; flex-direction: column; padding: 8px; box-sizing: border-box; gap: 6px; } .preview-header { color: #000000; text-shadow: 1px 1px 1px #0c0c0c; margin: 0 auto; border: solid 2px rgb(88, 41, 197); border-radius: 4px; font-weight: bold; font-size: 20px; color: #fff; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.32); text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; } .title { font-size: 26px; color: #00aa0e; margin: 0 auto; text-shadow: 1px 1px 2px #000; } #previewCanvas { width: 600px; height: 300px; } .buttons-row { display: flex; gap: 8px; justify-content: flex-start; } button { padding: 2px 12px; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgb(118, 37, 250); cursor: pointer; border: 0; background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); } button:hover { background-color: rgb(83, 170, 221); } button:disabled { opacity: 0.5; cursor: default; } .message-area { margin: 8px 0; padding: 6px 10px; background: #fff8d8; border-left: 4px solid #ffcc66; font-size: 14px; color: #444; display: none; } #thumbsContainer { display: grid; grid-template-columns: repeat(4, 50px); grid-auto-rows: 30px; gap: 30px; width: 100%; min-height: 110px; } .thumb img { width: 50px; height: 50px; object-fit: contain; border-radius: 4px; margin: 2px; } .thumb.selected img { outline: 2px solid #ff6699; } .thumbs-title { font-size: 18px; color: #55ff6c; text-shadow: 1px 1px 3px #000; text-align: center; font-weight: bold; } .note { font-size: 11px; color: #777; } @media (max-width: 599px) { body { flex-direction: column; } .left-panel { width: 100%; padding: 12px; } .right-panel { width: 100%; border-left: none; border-top: 1px solid #aebce4; padding: 10px 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 12px; } #thumbsContainer { grid-template-columns: repeat(5, 60px); width: auto; max-height: none; } .acc-header { font-size: 16px; padding: 10px; } .acc-body { font-size: 15px; } .control-row { flex-direction: column; align-items: flex-start; gap: 10px; } input[type="number"], input[type="text"], select { width: 100%; } button { width: 100%; font-size: 16px; padding: 10px; } .preview-area { width: 100%; } } @media (min-width: 600px) and (max-width: 899px) { body { flex-direction: column; } .left-panel { width: 100%; } .right-panel { width: 100%; border-left: none; border-top: 1px solid #aebce4; padding-top: 12px; flex-direction: row; flex-wrap: wrap; justify-content: center; } #thumbsContainer { grid-template-columns: repeat(8, 60px); width: auto; } .acc-header { font-size: 17px; } .control-row { flex-wrap: wrap; gap: 12px; } input[type="number"], input[type="text"], select { width: 200px; } } .toggle-wrapper { display: flex; align-items: center; gap: 10px; font-size: 14px; } .toggle-switch { position: relative; width: 50px; height: 26px; display: inline-block; } .toggle-switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 26px; transition: .3s; } .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: .3s; } .toggle-switch input:checked + .slider { background-color: #4CAF50; } .toggle-switch input:checked + .slider:before { transform: translateX(24px); } .toggle-wrapper { display: flex; align-items: center; gap: 10px; font-size: 14px; } .toggle-switch { position: relative; width: 50px; height: 26px; display: inline-block; } .toggle-switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 26px; transition: .3s; } .slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: .3s; } .toggle-switch input:checked + .slider { background-color: #4CAF50; } .toggle-switch input:checked + .slider:before { transform: translateX(24px); } #bgColorWrapper { display: none; } .switch { position: relative; display: inline-block; width: 46px; height: 24px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; background-color: #ccc; border-radius: 24px; top: 0; left: 0; right: 0; bottom: 0; transition: .3s; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .3s; } input:checked + .slider { background-color: #4caf50; } input:checked + .slider:before { transform: translateX(22px); } #messageArea { display: none; background: #ffe9a8; color: #333; padding: 10px 14px; border-radius: 6px; margin-bottom: 10px; font-size: 14px; border: 1px solid #e0c46c; cursor: pointer; transition: opacity 0.2s ease; } #saveSettingsBtn{ padding: 2px 12px; font-size: 14px; color: #fff; border-radius: 10px; background-color: rgb(37, 94, 250); } #saveSettingsBtn:hover { background-color: rgb(118, 196, 241); } #loadSettingsBtn{ padding: 2px 12px; font-size: 14px; color: #ffffff; border-radius: 10px; background-color: rgb(4, 105, 38); } #saveSettingsBtn:hover { background-color: rgb(172, 247, 143); } #clearSettingsBtn{ padding: 2px 12px; font-size: 14px; color: #ffffff; border-radius: 10px; background-color: rgb(105, 4, 92); } #clearSettingsBtn:hover { background-color: rgb(197, 89, 183); }