.qrg-container {
max-width: 420px;
margin: 30px auto;
padding: 25px;
text-align: center;
border-radius: 10px;
background: #f9fafb;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
box-sizing: border-box;
font-family: system-ui, sans-serif;
color:#000;
}
.qrg-container *,
.qrg-container *::before,
.qrg-container *::after {
box-sizing: border-box;
}
.qrg-container h2 {
margin: 0 0 15px;
color: #fff !important;
font-size: 24px;
}
.qrg-field,
.qrg-options label {
display: grid;
gap: 6px;
text-align: left;
font-size: 14px;
}
.qrg-field {
margin-bottom: 15px;
}
.qrg-container input[type="text"] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
}
.qrg-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 15px;
}
.qrg-options select,
.qrg-options input[type="color"] {
width: 100%;
min-height: 38px;
padding: 5px;
border-radius: 6px;
border: 1px solid #ccc;
background: #fff;
}
.qrg-container button {
padding: 10px 18px;
background: #0073aa;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 15px;
}
.qrg-container button:hover,
.qrg-container button:focus {
background: #005f8d;
}
.qrg-download {
margin-top: 12px;
}
.qrg-design {
margin: 0 0 15px;
padding: 14px;
border: 1px solid #d5d9dd;
border-radius: 8px;
text-align: left;
}
.qrg-design legend {
padding: 0 5px;
font-weight: 600;
}
.qrg-design-modes {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.qrg-design-modes label,
.qrg-tree-shadow-label {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.qrg-tree-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.qrg-tree-options label {
display: grid;
gap: 5px;
font-size: 14px;
}
.qrg-tree-options select,
.qrg-tree-options input[type="range"],
.qrg-tree-options input[type="color"] {
width: 100%;
}
.qrg-tree-options input[type="color"] {
min-height: 38px;
padding: 3px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
}
.qrg-tree-depth-output {
font-size: 12px;
color: #555;
}
.qrg-validation {
margin: 12px 0 0;
color: #44515b;
font-size: 14px;
}
.qrg-validation-error {
color: #a62d2d;
}
.qrg-downloads {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 12px;
}
.qrg-downloads .qrg-download {
margin-top: 0;
}
.qrg-result {
display: grid;
place-items: center;
margin-top: 20px;
min-height: 200px;
}
.qrg-result img,
.qrg-result canvas,
.qrg-result svg {
max-width: 100%;
height: auto;
}
.qrg-tab {
display: none;
}
.qrg-tab.active {
display: block;
}
.qrg-admin-wrap h2.nav-tab-wrapper {
margin-bottom: 20px;
}
#qrg-preview-container {
border: 1px solid #ddd;
padding: 20px;
background: #fff;
}
@media (max-width: 520px) {
.qrg-options {
grid-template-columns: 1fr;
}
.qrg-tree-options {
grid-template-columns: 1fr;
}
} .qrg-container [hidden] {
display: none !important;
} .qrg-view-toggle {
display: inline-flex;
margin-top: 16px;
border: 1px solid #cfd6dc;
border-radius: 999px;
overflow: hidden;
}
.qrg-container .qrg-view-toggle button {
padding: 8px 20px;
border-radius: 0;
background: #fff;
color: #33414d;
}
.qrg-container .qrg-view-toggle button[aria-pressed="true"] {
background: #0073aa;
color: #fff;
}
.qrg-view-hint {
margin: 8px 0 0;
color: #667380;
font-size: 13px;
}
.qrg-scene-canvas {
cursor: pointer;
} .qrg-swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
grid-column: 1 / -1;
margin: 2px 0 6px;
}
.qrg-container .qrg-swatch {
width: 28px;
height: 28px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #c5ccd2;
}
.qrg-container .qrg-swatch[aria-pressed="true"] {
box-shadow: 0 0 0 3px #0073aa;
}
.qrg-container .qrg-download-scene {
background: #5b6770;
}