/* ===================================================== AETHER BUTTON MATERIAL ===================================================== One visual material for every interactive Aether button. Mode styles own layout and motion; this file owns only surface, ink, and interactive state. ===================================================== */ :root { --aether-button-idle: #e8e8e8; --aether-button-hover: #f5f5f5; --aether-button-selected: #00ff3c; } .aether-ui-button { color: var(--aether-ui-ink, #000) !important; background: var(--aether-button-idle) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: color var(--aether-motion-control-duration) ease, background var(--aether-motion-control-duration) ease, border-color var(--aether-motion-control-duration) ease, box-shadow var(--aether-motion-control-duration) ease, transform var(--aether-motion-control-transform-duration) ease, width var(--aether-motion-control-duration) ease, letter-spacing var(--aether-motion-control-transform-duration) ease; } .aether-index-return { position: relative; overflow: hidden; isolation: isolate; padding: 7px 10px; border: 1px solid rgba(var(--aether-ui-signal-rgb, 200, 204, 211), 0.56); background: rgba(255, 255, 255, 0.012); color: rgba(3, 4, 7, 0.86); opacity: 0.78; backdrop-filter: invert(1) contrast(2.05) saturate(1.45) blur(2px); -webkit-backdrop-filter: invert(1) contrast(2.05) saturate(1.45) blur(2px); } .aether-index-return:hover { opacity: 1; border-color: rgba(var(--aether-ui-rgb, 200, 204, 211), 0.32); } /* Selectable rows used by Menu indexes, Collection lists, and Entity View navigation. Mode CSS may alter placement or responsive dimensions, but not the shared interaction. */ .aether-ui-list-item { position: relative; display: flex; align-items: center; width: calc(100% - 50px); min-height: 46px; margin-left: 30px; padding: 8px 30px 8px 12px; text-align: left; text-transform: uppercase; overflow: hidden; isolation: isolate; } .aether-ui-list-item.is-selected { width: calc(100% - 38px); letter-spacing: 0.13em; } .aether-menu .aether-ui-button, .aether-entity-view .aether-ui-button { border: 0 !important; box-shadow: none !important; filter: none !important; } .aether-ui-button::before, .aether-ui-button::after { display: none !important; content: none !important; background: transparent !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .aether-ui-button:hover, .aether-ui-button:focus-visible { color: var(--aether-ui-ink, #000) !important; background: var(--aether-button-hover) !important; } .aether-ui-button.is-selected, .aether-ui-button.is-active-floor { color: var(--aether-ui-ink, #000) !important; background: var(--aether-button-selected) !important; box-shadow: none !important; } .aether-ui-list-item:hover, .aether-ui-list-item:focus-visible { transform: translate3d(4px, 0, 0); } /* Overlay adapters: these selectors deliberately match the old compound overlay rules while keeping material ownership here. */ .aether-world-controls .aether-ui-button, .aether-world-controls .aether-world-overlay.aether-ui-button, .aether-world-menu-panel .aether-ui-button, .aether-world-menu-panel .aether-world-overlay.aether-ui-button { color: #000 !important; background: var(--aether-button-idle) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .aether-world-controls .aether-ui-button.has-aether-world-control-art, .aether-world-controls .aether-ui-button.has-aether-world-control-art:hover, .aether-world-controls .aether-ui-button.has-aether-world-control-art:focus-visible, .aether-world-menu-panel .aether-ui-button.has-aether-world-control-art, .aether-world-menu-panel .aether-ui-button.has-aether-world-control-art:hover, .aether-world-menu-panel .aether-ui-button.has-aether-world-control-art:focus-visible { background: transparent !important; border: 0 !important; appearance: none; } .aether-world-controls .aether-ui-button::before, .aether-world-controls .aether-ui-button::after, .aether-world-menu-panel .aether-ui-button::before, .aether-world-menu-panel .aether-ui-button::after { display: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* The focus prompt is div-based, but uses the same material. */ .aether-world-focus.aether-ui-button { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .aether-world-focus.aether-ui-button .aether-world-focus-surface { color: #000 !important; background: var(--aether-button-idle) !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .aether-world-focus.aether-ui-button, .aether-world-focus.aether-ui-button:hover, .aether-world-focus.aether-ui-button:focus-visible { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .aether-world-focus.aether-ui-button .aether-world-focus-surface::before, .aether-world-focus.aether-ui-button .aether-world-focus-surface::after { display: none !important; content: none !important; } .aether-world-focus.aether-ui-button:hover .aether-world-focus-surface, .aether-world-focus.aether-ui-button:focus-visible .aether-world-focus-surface { background: var(--aether-button-selected) !important; }