body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; color: #edf2f7; } [class~="menu"] { position: fixed; right: 1.25rem; top: 50%; transform: translateY(-50%); background: #2d3748; color: #fff; padding: 1.25rem; border-radius: 1.25rem; width: 20rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3); border: none; display: none; transition: all 0.3s ease-in-out; } .menu[class~="hidden"] { display: none; } [class~="menu"] [class~="menu-header"] { font-size: 1.5rem; font-weight: bold; color: #63b3ed; margin-bottom: 0.9375rem; text-align: center; border-bottom: 0.0625rem solid #4a5568; padding-bottom: 0.625rem; } [class~="menu"] ul { list-style: none; padding: 0; margin: 0; } [class~="menu"] ul li { margin: 0.9375rem 0; } [class~="menu"] ul li a { text-decoration: none; color: #edf2f7; font-weight: 500; transition: color 0.2s ease-in-out; } [class~="menu"] ul li a:hover { color: #63b3ed; } [class~="menu-button"] { background-color: #3182ce; color: #edf2f7; border: none; padding: 0.625rem 0.9375rem; border-radius: 0.5rem; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease-in-out; text-align: center; display: block; width: 100%; margin-top: 1.25rem; } [class~="menu-button"]:hover { background-color: #2b6cb0; } [class~="footer-text"] { position: absolute; bottom: 0.625rem; left: 50%; transform: translateX(-50%); font-size: 0.8rem; font-weight: normal; color: #a0aec0; text-align: center; width: 100%; } h1 { font-size: 1.5rem; margin: 0 0 0.9375rem 0; text-align: center; text-shadow: 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, 0.5); } button { width: 100%; margin: 0.625rem 0; padding: 0.75rem; border: none; border-radius: 0.75rem; background: #e53e3e; color: #fff; cursor: pointer; font-size: 1rem; font-weight: bold; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } button:hover { background: #f12727; transform: scale(1.03); } button:active { background: #681a1a; transform: scale(1); } [class~="patterns"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } button[class~="pattern-btn"] { background: #3182ce; color: #fff; border: none; border-radius: 0.5rem; padding: 0.75rem; transition: background 0.3s ease, transform 0.3s ease; cursor: pointer; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2); } button[class~="pattern-btn"]:hover { background: #2c5282; transform: scale(1.05); } button[class~="pattern-"]btn[class~="active"] { background: #48bb78; box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.3); } button:hover, [class~="menu"] { box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.3); } button:active { box-shadow: none; } #patterns-container, #extras-container { display: none; } #patterns-container, #extras-container { position: fixed; top: 50%; transform: translateY(-50%); left: 1.25rem; background: #2d3748; color: #edf2f7; padding: 1.5625rem; border-radius: 1.25rem; width: 20rem; box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.5); border: none; transition: all 0.3s ease-in-out; } #extras-container { left: 25rem; } [class~="extras-list"] { max-height: 20rem; overflow-y: auto; padding-right: 0.75rem; scrollbar-width: thin; scrollbar-color: #48bb78 #2d3748; } [class~="extras-list"]::-webkit-scrollbar { width: 0.5rem; } [class~="extras-list"]::-webkit-scrollbar-thumb { background-color: #48bb78; border-radius: 0.5rem; } [class~="extras-list"]::-webkit-scrollbar-track { background-color: #2d3748; } [class~="extras-list"] label { display: flex; align-items: center; margin: 0.75rem 0; padding: 0.75rem; background: #2d3748; border-radius: 0.625rem; color: #cbd5e0; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); } [class~="extras-list"] label:hover { background: #4a5568; transform: scale(1.03); } [class~="extras-list"] input[type="checkbox"] { appearance: none; width: 1.25rem; height: 1.25rem; border: 0.125rem solid #48bb78; border-radius: 0.25rem; background: #2d3748; cursor: pointer; margin-right: 0.75rem; transition: all 0.3s ease; } [class~="extras-list"] input[type="checkbox"]:checked { background: #48bb78; border-color: #38a169; } #static-extras { background: #2c5282; color: #fff; border: 0.125rem solid #2b6cb0; border-radius: 0.5rem; padding: 0.75rem; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); } #static-extras:hover { background: #2b6cb0; transform: scale(1.03); } #static-extras:active { background: #1a365d; transform: scale(1); } #static-extras-container { position: fixed; top: 50%; left: 1.25rem; transform: translateY(-50%); background: #2d3748; color: #edf2f7; padding: 1.5625rem; border-radius: 1.25rem; width: 20rem; box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.5); border: none; transition: all 0.3s ease-in-out; display: none; } #static-extras-container [class~="header"] { font-size: 1.5rem; margin-bottom: 0.9375rem; text-align: center; text-shadow: 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, 0.5); } #static-extras-container [class~="attached-equipment"] { max-height: 16.25rem; overflow-y: auto; padding-right: 0.75rem; scrollbar-width: thin; scrollbar-color: #48bb78 #2d3748; } #static-extras-container [class~="attached-equipment"]::-webkit-scrollbar { width: 0.5rem; } #static-extras-container [class~="attached-equipment"]::-webkit-scrollbar-thumb { background-color: #48bb78; border-radius: 0.5rem; } #static-extras-container [class~="attached-equipment"]::-webkit-scrollbar-track { background-color: #2d3748; } #close-static-extras-container { width: 100%; margin-top: 1.25rem; padding: 0.75rem; border: none; border-radius: 0.75rem; background: #e53e3e; color: #fff; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } #close-static-extras-container:hover { background: #c53030; transform: scale(1.03); } [class~="attached-equipment"] [class~="attached-item"] { margin: 0.625rem 0; padding: 0.9375rem; background: #2d3748; color: #edf2f7; border-radius: 0.75rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.25); } [class~="attached-equipment"] [class~="attached-item"]:hover { background: #4a5568; transform: scale(1.04); } [class~="attached-equipment"] { max-height: 16.25rem; overflow-y: auto; padding-right: 0.75rem; scrollbar-width: thin; scrollbar-color: #48bb78 #2d3748; } [class~="attached-equipment"] [class~="attached-"]item[class~="selected"] { background-color: #10b981; color: #ffffff; font-weight: bold; border: 0.125rem solid #4ade80; } [class~="patterns-container"] [class~="pattern-"]btn[class~="selected"], #static-extras-container [class~="attached-"]item[class~="selected"] { background-color: #10b981; color: #ffffff; font-weight: bold; border: 0.125rem solid #4ade80; } [class~="attached-equipment"]::-webkit-scrollbar { width: 0.5rem; } [class~="attached-equipment"]::-webkit-scrollbar-thumb { background-color: #48bb78; border-radius: 0.5rem; } [class~="attached-equipment"]::-webkit-scrollbar-track { background-color: #2d3748; } [class~="close-button"] { width: 100%; margin: 0.625rem 0; padding: 0.75rem; border: none; border-radius: 0.75rem; background: #e53e3e; color: #fff; cursor: pointer; font-size: 1rem; font-weight: bold; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } [class~="close-button"]:hover { background: #c53030; transform: scale(1.03); } [class~="close-button"]:active { background: #9b2c2c; transform: scale(1); } @media (max-width: 48rem) { [class~="menu"], #patterns-container, #extras-container { width: 90%; left: 5%; right: 5%; } #extras-container { left: 5%; top: 21.875rem; } } [class~="plugins"] { margin-top: 1.25rem; text-align: center; } [class~="plugins"] h2 { font-size: 1.2rem; margin-bottom: 0.625rem; } [class~="plugin-options"] { display: flex; justify-content: center; align-items: center; gap: 0.625rem; font-size: 0.9rem; color: #cbd5e0; } [class~="plugin-options"] label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } [class~="plugin-options"] input[type="checkbox"] { appearance: none; width: 1.125rem; height: 1.125rem; border: 0.125rem solid #48bb78; border-radius: 0.25rem; background: #2d3748; cursor: pointer; transition: all 0.3s ease; } [class~="plugin-options"] input[type="checkbox"]:checked { background: #48bb78; border-color: #38a169; } [class~="plugin-buttons"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; margin-top: 0.625rem; justify-items: center; } [class~="plugin-buttons"] button { flex: 1; padding: 0.75rem; font-size: 0.9rem; border-radius: 0.5rem; background: #2c5282; color: #fff; border: 0.125rem solid #2b6cb0; cursor: pointer; transition: background 0.3s ease; width: 100%; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); } [class~="plugin-buttons"] button:hover { background: #2b6cb0; transform: scale(1.03); } [class~="plugin-buttons"] button:active { background: #1a365d; transform: scale(1); } #notification-container { position: fixed; top: 20%; right: 1.25rem; z-index: 1000; max-width: 18.75rem; display: flex; flex-direction: column; gap: 0.625rem; } [class~="notification"] { background-color: #1a202c; color: #10b981; border-left: 0.25rem solid #10b981; padding: 0.625rem 0.9375rem; border-radius: 0.5rem; font-size: 0.9rem; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); animation: fadeOut 2s forwards; } @keyframes fadeOut { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } [class~="pattern-edit"] { width: 100%; border: 0.125rem solid #2c5282; padding: 0.625rem; font-size: 1rem; font-family: 'Poppins', sans-serif; text-align: center; box-sizing: border-box; border-radius: 0.75rem; background-color: #1a202c; color: #edf2f7; transition: all 0.3s ease; } [class~="pattern-edit"]:focus { outline: none; border: 0.125rem solid #2b6cb0; background-color: #2c5282; color: #ffffff; box-shadow: 0 0 0.625rem rgba(43, 108, 176, 0.5); } [class~="pattern-edit"]::placeholder { color: #a0aec0; font-style: italic; } #camera-mode { background-color: #2c5282; color: #edf2f7; border: 0.125rem solid #2b6cb0; border-radius: 0.75rem; padding: 0.625rem 1.25rem; font-size: 1rem; font-family: 'Poppins', sans-serif; cursor: pointer; margin-top: 0.625rem; transition: all 0.3s ease; } #camera-mode:hover { background-color: #2b6cb0; color: #ffffff; } #signals-setup-container { position: fixed; top: 50%; left: 1.25rem; transform: translateY(-50%); background: #2d3748; color: #edf2f7; padding: 1.5625rem; border-radius: 1.25rem; width: 20rem; box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.5); border: none; transition: all 0.3s ease-in-out; }