/* ============================================================
Digital Twins — reusable SuperSplat viewer branding override.
Drop this file (+ dtwins-viewer.js) next to index.html of ANY
SuperSplat viewer export and add two lines to its :
To retint the whole UI, edit ONLY the line below.
============================================================ */
:root {
--dtwins-accent: #A9754C; /* <-- change this one line to change the brand color everywhere */
--dtwins-accent-rgb: 169, 117, 76; /* same color as R, G, B (keep in sync with the line above) */
}
/* Hide stock SuperSplat toolbar buttons we don't expose */
#controlsWrap > #buttonsContainer #orbitCamera,
#controlsWrap > #buttonsContainer #showCollision,
#controlsWrap > #buttonsContainer #info {
display: none !important;
}
/* Hide the stock SuperSplat branding badge (auto-shown when embedded) */
#viewerBranding {
display: none !important;
}
/* --- Recolor every orange accent in the stock UI to the brand color --- */
#controlsWrap > #timelineContainer > #handle {
background-color: var(--dtwins-accent) !important;
}
#controlsWrap > #buttonsContainer .controlButton.active:not(.toggle) {
color: var(--dtwins-accent) !important;
}
#controlsWrap > #buttonsContainer .controlButton.toggle {
background-image: linear-gradient(90deg, transparent 0%, transparent 50%, var(--dtwins-accent) 50%, var(--dtwins-accent) 100%) !important;
}
#settingsPanel > .settingsRow > div.toggleSwitch.active .toggleTrack {
background-color: rgba(var(--dtwins-accent-rgb), 0.35) !important;
}
#settingsPanel > .settingsRow > div.toggleSwitch.active .toggleTrack .toggleThumb {
background-color: var(--dtwins-accent) !important;
}
#infoPanel > #infoPanelContent > #viewerTitle > svg > g.fill {
fill: var(--dtwins-accent) !important;
}
#infoPanel > #infoPanelContent > #infoPanels h1 {
color: var(--dtwins-accent) !important;
}
#infoPanel > #infoPanelContent > #tabs > .tab.active {
border-bottom-color: var(--dtwins-accent) !important;
}
#xrModal > #xrModalContent > #xrModalButtons > button#xrModalOk {
background-color: rgba(var(--dtwins-accent-rgb), 0.7) !important;
border-color: rgba(var(--dtwins-accent-rgb), 0.8) !important;
}
#xrModal > #xrModalContent > #xrModalButtons > button#xrModalOk:hover {
background-color: var(--dtwins-accent) !important;
}
/* --- Digital Twins branding badge (injected by dtwins-viewer.js) --- */
#dtwinsBrand {
position: absolute;
top: max(16px, env(safe-area-inset-top));
left: max(16px, env(safe-area-inset-left));
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
color: #E0DCDD;
transition: color 150ms ease;
}
#dtwinsBrand:hover {
color: #fff;
}
#dtwinsBrand > svg {
height: 22px;
width: 22px;
flex-shrink: 0;
padding: 7px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.3);
}
#dtwinsBrand > span {
font-size: 14px;
font-weight: bold;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4), 1px -1px 0 rgba(0, 0, 0, 0.4), -1px 1px 0 rgba(0, 0, 0, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.4);
}