/* Room canvas pixel size -- defaults to the classic 512x384 Palace room; set to a larger size via JS (updateRoomFrameSize in room-nav.js) when the current room's background exceeds that (roomdimensions.json on the server). Every element that used to be hardcoded to 512px/384px below now tracks these instead. */ html { --room-w: 512px; --room-h: 384px; } html { scrollbar-gutter: stable; } body { font-family: -apple-system, Segoe UI, Helvetica, Arial, sans-serif; background:#222; color:#eee; margin:0; overflow-x:hidden; } .layout { display:flex; gap:0; align-items:flex-start; } .sidebar { position:sticky; top:0; width:300px; flex-shrink:0; background:#222222; padding:16px; height:100vh; overflow:hidden; box-sizing:border-box; display:flex; flex-direction:column; border-right:1px solid #333; } /* Inner scroll region -- content scrolls here while .footer stays pinned as a non-scrolling flex child at the bottom, so the version/email footer can never overlap a long worn-props / controls list. */ .sidebar-content { flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-gutter:stable; } .sidebar h3 { margin:18px 0 8px; font-size:12px; text-transform:uppercase; color:#888; letter-spacing:.05em; } .sidebar h3:first-child { margin-top:0; } .sidebar-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; } .sidebar-header .title { flex:1; font-size:12px; color:#888; text-transform:uppercase; letter-spacing:.05em; text-align:center; } .sidebar.collapsed { width:56px; padding:12px 8px; overflow:visible; } .sidebar.collapsed .sidebar-header { flex-direction:column; gap:10px; margin-bottom:0; } .sidebar.collapsed .sidebar-header .title { display:none; } .sidebar.collapsed .sidebar-content { display:none; } .iconbtn { width:32px; height:32px; border:none; padding:0; cursor:pointer; image-rendering:pixelated; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:transparent; flex-shrink:0; } .iconbtn:disabled { cursor:default; opacity:.4; } #sidebarToggleBtn { background-image:url(data:image/gif;base64,R0lGODdhIAAgAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///ywAAAAAIAAgAAAI/wBFCBxIsKDBgwgTKlyIcEYVRLuYueu2C1GVGQwPzkDE7J/HfxMnUrxDJOPAO+4+enTHsls3Zrt2ZTKTccYulR9bvoypquedhTM6/nOpsqWqO3cy9cyEiGZCoarMqCrqjhkijGaUMr1TBeHUf8yIzPia0ypGIogybTVTsqCZj6ocdsNZ9WoEIkkRNTXTteBckIiIZMI5lFmmiw/X8sV4MqcqRH/Lwmx6Ry+iO3zFEiQLMiXOnbtUMdWLtMpFxiKIpGTp+TMzmD1Fk86MWkQV1rhzgo6t9jLmKpoHmtHZjfjupVt/E2k7ELLL5y5fwwyN3LeZxbVFcGT2XPp06qKT84QFnl2799cx0yMXT7t8lfTweVa33l4j+NjrLWO+Tr68wBlK4RfeaPSZJpZ/J6mlIIG+7WfgDAgOhNZlZiBlIVL8AXegQBFEkFCFpxFh2ogaQjhQhwB42BBfInSYUIcoApCiQiKKBaOMOOaYo4o0LtcWjBHoKKOLJkFopElIJqnkkkwuGRAAOw==); } #sidebarToggleBtn:active { background-image:url(data:image/gif;base64,R0lGODdhIAAgAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///ywAAAAAIAAgAAAI/wBFCBxIsKDBgwgTKlyIkMidXf8iRtx1pwrDg1WYSdy4UZXFiwJVcRwpsVumGQyJkFz5z103VSgTqmQZ0Z2qTN1adtt1sqFEd4jckdxVZQaibi53qUKEUGhEMzNH7iIyw8yubsx4ZjITcyCikg5XThVR5WrWTIjudBUxYyOzjCu73XG4K+vNtEQIZtroDiJLZplUMbOb6Y6Zj2yd0uSLdZdStBWpCjSzeKQ7l3bTHu56pzLjxncNU52Bcq9nnaAhHx6N0m9ll6BDV2GNUjHNy7FVFyVNWoTrlbhza57Nu/dX4MHthl5dvHcVksEbP9ZNu2sVpJezd8OaVend4dW7znPAyZ17d1U3IRsm3rz35Lo30ctHr94M84HFCY5XNZeImTsABmhfFcQNFEEEvBlURWF5IdhebwceCEAEbLmnnxmIQCVChBxGCMCHHzq4VkH2rZaXQBGAqCKFFS5ExIswWmhQggw9aCONIFV4o4w5CmTjRQEBADs=); } #propbagToggleBtn { background-image:url(data:image/gif;base64,R0lGODlhIAAgALMAAFVVVd3d3YiIiP///3d3d6qqqkRERBEREQAAACIiIgAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAgACAAAATwMMlJZZko58r7vFqoeaSViOh0lJWxdSNyzCt7IlQsETxtowieMFEoGI4+j0hIKBqPUEkSk2ESi4lBIsqZ3oTOy9Zgm4qwEnIn0JlJDyFiKQAAUGi17Wwk9tDtCXhJNHxzdYEre3l7hSQBbkeBGXkGcI1tBwSRIgdqlZY4fSo0PBIonWmMoRd4BQICBKZAqHqgFgUHYbJAk56MblcgvKc1SBqqw8PFlcfIyZzLoJ2gz5yeLiHM1SE01yLa290UR9/UvN2R49ga4LMzXC3rGcbu8Bzk5cT2HvLz0u/pbOxCgATPPoGyPnUKiFDJPDUNJ0QAADs=); } #propbagToggleBtn:active { background-image:url(data:image/gif;base64,R0lGODlhIAAgAKIAAMzMzERERKqqqlVVVXd3d////yIiIjMzMyH5BAAAAAAALAAAAAAgACAAAAP2aLqsRfBI2apdxcw9r3cEJy7D1wiU1R1DW5rawaxQYbuweNg8YQtA3IXDKwKPAohwMSn6bD7CEUJVtma7IlSarHqtr1jzAel+yd6robWJfqkFAKDqCgvYEvfbJwfXFS4Tem9xcy0EbGF4eWiEh0CIEmEBA22NaQMFkBwDAgqUlYxfdVsinZ+LT4guTiE6pwaggk+ZPa46kp6xeIdPD7ivLwGUE4vAwMLEksbHnMmhLHfNuLDDHNLTGy661hvY2dsM3RPfyC1HDeMS5abnQBbqB0HUne8X8fLQxfW6HwEi37bZg6HA25066AhWWCewn8Ih6xw+NJAAADs=); } #stageWrap { background:#2c2c2c; border-radius:8px; padding:10px; text-align:center; overflow-x:auto; } /* Default legacy size; JS (syncAvatarStageCanvas) grows this for Modern props up to ~220px+. */ #stage { width:132px; height:132px; max-width:100%; image-rendering:pixelated; background:#666; border-radius:4px; box-sizing:border-box; } #stage.transparent-bg { background: repeating-conic-gradient(#3a3a3a 0% 25%, #2c2c2c 0% 50%) 0 0/16px 16px; } .controlrow { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; } .rowspacer { width:1px; align-self:stretch; background:#3c3c3c; margin:0 4px; } .exportrow { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; } .zoombtn { padding:5px 10px; border-radius:4px; border:1px solid #555; background:#222; color:#eee; cursor:pointer; font-size:12px; } .zoombtn.sel { background:#555; border-color:#aaa; color:#fff; } .bgswatch { width:24px; height:24px; border-radius:4px; cursor:pointer; border:2px solid transparent; } .bgswatch.sel { border-color:#fff; } .bgswatch.neutral { background:repeating-conic-gradient(#888 0% 25%, #bbb 0% 50%) 0 0/8px 8px; } .exportrow select { padding:5px; border-radius:4px; background:#222; color:#eee; border:1px solid #555; font-size:12px; } .exportbtn { width:32px; height:19px; padding:0; border-radius:0; border:1px solid; border-color:#888 #333 #333 #888; background:#555; color:#fff; cursor:pointer; font-size:8px; line-height:17px; font-weight:600; } .exportbtn:hover { background:#666; } .exportbtn:active { border-color:#333 #888 #888 #333; background:#444; } .nakedbtn { width:32px; height:19px; background-image:url(data:image/gif;base64,R0lGODlhIAATAKIAAFVVVYiIiCIiIv///0RERAAAAAAAAAAAACH5BAAAAAAALAAAAAAgABMAAANmGLrc/osEQqu9OFMxtf9bB44XR56VOQ5rKn4sEWezKg8DQOE6GwM8AhDnqsRmspsRAJQxa6KjEOdL3ojSkHFn9fWsu2eRmxxWy8RpmmBDjdruDzyumdMx9rslr9+wBYCBgoOEhYAJADs=); background-size:contain; background-repeat:no-repeat; image-rendering:pixelated; border:1px solid; border-color:#888 #333 #333 #888; cursor:pointer; } .nakedbtn:active { background-image:url(data:image/gif;base64,R0lGODlhIAATAKIAAFVVVd3d3URERP///2ZmZgAAAAAAAAAAACH5BAAAAAAALAAAAAAgABMAAANhGLrc/osEQqu9OFMxtf9bB44XR56VOQ5rKn4sEWezKg8zTrExgAMEny5Uic1kt+JOBvC5lMgbL4rTGZ9L5HUAnBabNdFVSg0OhWEUyqYGsdueNzwjn5dedoxgz+/7/4B+CQA7); border-color:#333 #888 #888 #333; background-color:#444; } .removefacecolorbtn { padding:5px 10px; border-radius:4px; border:1px solid #555; background:#222; color:#eee; cursor:pointer; font-size:12px; } .removefacecolorbtn:hover { background:#333; } .removefacecolorbtn:active { background:#111; } .layerbtn.sel { background:#555; border-color:#aaa; color:#fff; } .layerbtn.sel:hover { background:#666; } #wornlist { display:flex; flex-direction:column; gap:4px; margin-top:6px; } .wornrow { display:flex; align-items:center; gap:8px; background:#2c2c2c; border-radius:4px; padding:4px 6px; font-size:12px; } .wornrow img { width:22px; height:22px; image-rendering:pixelated; } .wornrow .rm { margin-left:auto; cursor:pointer; color:#c77; background:none; border:none; font-size:14px; } #wornCount, #wornMax { color:#aaa; font-size:12px; } .macros-heading { margin-top:16px; display:flex; align-items:center; gap:6px; position:relative; } /* Info glyph via CSS mask, painted black (light plate so it reads on the dark sidebar). */ .macros-info-btn { width:14px; height:14px; border:none; padding:0; cursor:pointer; flex-shrink:0; border-radius:50%; background:#e6e6e6; position:relative; z-index:31; } .macros-info-btn::after { content:""; position:absolute; inset:1px; background-color:#000; background-image:none; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1.25a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM8 2.75a5.25 5.25 0 110 10.5A5.25 5.25 0 018 2.75z'/%3E%3Ccircle fill='%23000' cx='8' cy='5.15' r='1.05'/%3E%3Crect fill='%23000' x='7.15' y='6.9' width='1.7' height='4.5' rx='.45'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1.25a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM8 2.75a5.25 5.25 0 110 10.5A5.25 5.25 0 018 2.75z'/%3E%3Ccircle fill='%23000' cx='8' cy='5.15' r='1.05'/%3E%3Crect fill='%23000' x='7.15' y='6.9' width='1.7' height='4.5' rx='.45'/%3E%3C/svg%3E"); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; } .macros-info-btn:hover { background:#f2f2f2; } .macros-info-btn[aria-expanded="true"] { background:#fff; } .macros-hint { margin:4px 0 8px; font-size:11px; color:#999; line-height:1.35; } /* Floating thought balloon — no plate; ear dots aim at the (i) button. left/top are set in JS from the info button's offset. */ .macros-info-balloon { position:absolute; left:0; top:0; width:210px; height:150px; z-index:30; margin:0; padding:0; background:transparent; overflow:visible; pointer-events:none; } .macros-info-balloon.hidden { display:none; } .macros-info-balloon canvas { display:block; width:210px; height:150px; } .macros-info-balloon-text { position:absolute; left:34px; top:42px; width:142px; margin:0; padding:0; font:bold 11px/1.4 Tahoma,"MS Sans Serif",Geneva,sans-serif; color:#2d2a10; text-align:center; pointer-events:none; } .macros-keys { display:flex; flex-wrap:wrap; gap:5px 4px; padding:2px 0 10px; } /* Tactile keycap — cool gray for dark sidebar. Outer box is ~28×28; ::after borders must equal that size or the bevel clips. */ .macrobtn { appearance:none; -webkit-appearance:none; box-sizing:content-box; border:none; cursor:pointer; user-select:none; position:relative; isolation:isolate; overflow:hidden; width:16px; height:8px; padding:10px 6px; border-radius:4px; flex:0 0 auto; text-align:center; font:bold 8px Arial, sans-serif; line-height:8px; color:#6e6e6e; background:transparent; transition:box-shadow .02s cubic-bezier(.79,.03,.43,1); box-shadow:inset 0 0 0 0 #2e2e2e, 0 0 0 1px #2e2e2e, 0 6px 4px 0 rgba(0,0,0,.28); } .macrobtn:hover { color:#555; } .macrobtn:active { transition:box-shadow .1s cubic-bezier(0,0,0,1); box-shadow:inset 0 0 2px 0 #2e2e2e, 0 0 0 1px #2e2e2e, 0 4px 4px 0 rgba(0,0,0,.22); } .macrobtn::before { content:""; position:absolute; z-index:-1; left:4px; top:4px; width:20px; height:20px; border-radius:2.5px; box-shadow:0 -1px 0 0 #d4d4d4, 0 1px 0 0 #7a7a7a; background:linear-gradient(0deg, #cfcfcf, #a8a8a8); transition:background .02s cubic-bezier(.79,.03,.43,1); } .macrobtn:active::before { background:linear-gradient(0deg, #c4c4c4, #949494); transition:background .1s cubic-bezier(0,0,0,1); } .macrobtn::after { content:""; position:absolute; z-index:-2; left:0; top:0; filter:blur(.5px); /* 14+14=28 — matches ~28×28 outer box */ border-top:14px solid #dcdcdc; border-bottom:14px solid #6e6e6e; border-left:14px solid #b0b0b0; border-right:14px solid #b0b0b0; } /* Set macros: sage-tinted keycap (keeps “filled” signal from before). */ .macrobtn.set { color:#4a6352; } .macrobtn.set:hover { color:#3a5242; } .macrobtn.set::before { background:linear-gradient(0deg, #c5d4c8, #9aaf9e); box-shadow:0 -1px 0 0 #d8e4dc, 0 1px 0 0 #6a8070; } .macrobtn.set:active::before { background:linear-gradient(0deg, #b8cabc, #8a9f8e); } .macrobtn.set::after { border-top-color:#d0ddd4; border-bottom-color:#6a7a68; border-left-color:#b0c0b4; border-right-color:#b0c0b4; } .footer { text-align:center; flex:0 0 auto; background:#222222; margin-top:10px; padding-top:10px; border-top:1px solid #333; font-size:10px; color:#666; } .contact { font-size:10px; margin-bottom:6px; } .contact a { color:#8ab; text-decoration:none; } .contact a:hover { text-decoration:underline; color:#adf; } .main { flex:1; min-width:0; background:#444444; } .main.collapsed { display:none; } .toolbar { position:sticky; top:0; background:#3a3a3a; padding:10px 14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:10; } .toolbar .search-input { padding:6px 10px; border-radius:4px; border:1px solid #555; background:#222; color:#eee; min-width:200px; } .chip { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:14px; border:1px solid #555; background:#2a2a2a; color:#aaa; font-size:12px; white-space:nowrap; cursor:pointer; user-select:none; } .chip input { accent-color:#6a9; margin:0; } .chip:has(input:checked) { background:#345; border-color:#6a9; color:#dff0ff; } #propsCount { margin-left:4px; font-size:11px; color:#888; white-space:nowrap; } .sidebar-header #sidebarToggleBtn { margin-left:auto; } .sidebar.collapsed .sidebar-header #sidebarToggleBtn { margin-left:0; } .grid { display:flex; flex-wrap:wrap; gap:8px; padding:14px; align-content:flex-start; background:#222; } .card { position:relative; background:#2c2c2c; border-radius:6px; padding:8px; display:flex; gap:8px; align-items:flex-start; cursor:pointer; outline:1px solid transparent; flex:0 0 auto; transition:padding .12s ease; } .card:hover { background:#343434; } .card.worn { outline:1px solid #fff; background:#3a3a3a; } .thumb { width:44px; height:44px; image-rendering:pixelated; flex-shrink:0; background:transparent; border-radius:3px; pointer-events:none; } .thumb.err { display:flex; align-items:center; justify-content:center; color:#a55; font-size:20px; font-weight:bold; } .meta { font-size:11px; line-height:1.5; overflow:hidden; max-width:140px; } .meta.forcehide { display:none !important; } .meta.forceshow { display:block !important; } .grid.hidemeta .meta { display:none; } /* Prop names stay hidden until Option/Alt is held (same as Modern / room tags). */ .card > .name { display:none; align-self:center; max-width:120px; margin:0; font-size:12px; font-weight:600; color:#eee; word-break:break-word; } body.alt-labels-visible .card > .name { display:block; } .muted { color:#999; } .warn { color:#e0a030; } .errtext { color:#e07070; } .badge { display:inline-block; background:#39506b; color:#cfe3ff; border-radius:3px; padding:1px 6px; margin:2px 3px 0 0; font-size:10px; } .card[data-err="1"] { outline:1px solid #663333; cursor:default; } .infobtn { position:absolute; top:4px; right:4px; width:16px; height:16px; border-radius:50%; background:#444; color:#ccc; border:none; font-size:10px; cursor:pointer; line-height:16px; padding:0; } .grid:not(.hidemeta) .infobtn { display:none; } .hidden { display:none !important; } #toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(20px); background:#222; color:#eee; border:1px solid #567; padding:10px 18px; border-radius:6px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.5); } #toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ---- "New version available" reload banner (non-blocking, dismissible) ---- */ #updateBanner { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:2000; display:flex; align-items:center; gap:12px; background:#1d2b1d; border:1px solid #3a5a3a; border-radius:8px; padding:8px 10px 8px 14px; box-shadow:0 6px 24px rgba(0,0,0,.5); font-size:13px; color:#dfe; max-width:92vw; } #updateBanner .update-reload { border:1px solid #4a7; background:#2a5a2a; color:#dff; padding:4px 12px; border-radius:5px; cursor:pointer; font-size:12px; font-weight:600; } #updateBanner .update-reload:hover { background:#367036; } #updateBanner .update-dismiss { border:none; background:transparent; color:#9ab; cursor:pointer; font-size:18px; line-height:1; padding:0 4px; } #updateBanner .update-dismiss:hover { color:#fff; } .hiddeninput { display:none; } #emptyState { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:30px; text-align:center; color:#999; } #emptyState img { width:64px; height:64px; image-rendering:pixelated; opacity:.85; } #emptyState p { max-width:420px; font-size:15px; line-height:1.5; margin:0; } .modal-bigbtn-secondary { margin-top:8px; background:#2a2a2a; border-color:#555; color:#ccc; } .modal-bigbtn-secondary:hover:not(:disabled) { background:#384450; } .modal-bigbtn:disabled { opacity:.45; cursor:default; } .exportbagbtn { padding:6px 14px; border-radius:4px; border:1px solid #567; background:#2a2a2a; color:#dff0ff; cursor:pointer; font-size:12px; font-weight:600; } .exportbagbtn:hover { background:#384450; } /* In a live multiplayer session, hide prop-picker controls that don't apply. */ body.mp-live #q, body.mp-live #metaChip, body.mp-live #bagChip, body.mp-live #animChip, body.mp-live #errChip, body.mp-live #exportBagBtn { display:none; } .helplinkrow { display:flex; justify-content:center; margin-top:14px; } .helplinkrow a { display:inline-block; line-height:0; } .helplinkrow img { width:32px; height:32px; image-rendering:pixelated; } .collapsed-footer { display:none; position:absolute; bottom:12px; left:0; right:0; flex-direction:column; align-items:center; gap:10px; } .sidebar.collapsed .collapsed-footer { display:flex; } .collapsed-footer a { display:block; line-height:0; } .collapsed-footer img { width:28px; height:28px; image-rendering:pixelated; } #loadingOverlay { position:fixed; inset:0; background:rgba(10,10,12,.88); z-index:1000; display:flex; align-items:center; justify-content:center; } #loadingOverlay.hidden { display:none; } .loadingbox { background:#222; border:1px solid #456; border-radius:10px; padding:28px 36px; text-align:center; max-width:420px; box-shadow:0 8px 30px rgba(0,0,0,.5); } .loadingspinner { width:36px; height:36px; margin:0 auto 16px; border-radius:50%; border:4px solid #345; border-top-color:#8cf; animation:loadspin 0.9s linear infinite; } @keyframes loadspin { to { transform:rotate(360deg); } } #loadingTitle { font-size:15px; font-weight:600; color:#dff0ff; margin-bottom:6px; } #loadingDetail { font-size:12px; color:#9ab; } .footer { text-align:center; } .disclaimer { font-size:9px; color:#555; line-height:1.4; margin-bottom:6px; } .version { font-size:10px; color:#666; } .modal-backdrop { position:fixed; inset:0; background:rgba(10,10,12,.78); z-index:1000; display:flex; align-items:center; justify-content:center; } .modal-backdrop.hidden { display:none; } /* psConfirm (confirm-prompt.js) is invoked from all over the app -- including from inside the prop editor's own overlay stack (.prop-editor-backdrop z-index:12000, .pce-pixelize- backdrop z-index:12500) and the modern-avatar right-click menu (z-index:100000) -- so its shared #psConfirmModal must always render above every other stacking context in the app, not just the base .modal-backdrop z-index:1000 it would otherwise inherit. Without this, e.g. clicking Cancel in the prop editor rendered the confirm dialog BEHIND the editor, making it unusable. Keep this above the highest z-index anywhere else in the app. */ #psConfirmModal { z-index:200000; } .modal-box { position:relative; background:#262626; border:1px solid #456; border-radius:10px; padding:24px 26px; width:340px; max-width:90vw; max-height:80vh; overflow-y:auto; box-shadow:0 8px 30px rgba(0,0,0,.5); } .modal-box h3 { margin:0 0 16px; font-size:15px; color:#dff0ff; text-align:center; } #introModal h3 { color:#e08a8a; } #introModal .modal-box { border:1px solid #e08a8a; } .modal-close { position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; background:#383838; color:#ccc; border:none; font-size:15px; cursor:pointer; line-height:24px; padding:0; } .modal-close:hover { background:#484848; } /* Visual chrome (background/border/title-bar gradient/close-button look) is intentionally NOT set here anymore -- it comes from the classic-stylesheets theme (dialog-classic-themes.generated.css) via the .window/.title-bar/ .window-body classes on this element, scoped by body[data-dialog-os]. Only structural/behavioral rules (position, sizing, drag cursor, click- through) that classic-stylesheets doesn't know about stay here. */ #connectModal { position:fixed; z-index:1000; width:max-content; min-width:420px; max-width:90vw; user-select:none; } #connectModal.hidden { display:none; } #connectModal .pp-title { cursor:move; } #connectModal .pp-title-text { pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #connectModal .modal-box { position:static; width:auto; max-width:none; border:none; border-radius:0; box-shadow:none; max-height:70vh; padding:12px 14px 14px; } #connectModal .conn-user-row select { flex:1; padding:5px 8px; border-radius:4px; border:1px solid #555; background:#1a1a1a; color:#eee; font-size:12px; } .modal-bigbtn { display:block; width:100%; padding:10px 14px; border-radius:6px; border:1px solid #567; background:#345; color:#dff0ff; cursor:pointer; font-size:13px; font-weight:600; } .modal-bigbtn:hover { background:#456; } .modal-bigbtn-naked { display:block; width:100%; padding:10px 14px; border-radius:0; border:none; border-top:1px solid #aaa; border-left:1px solid #aaa; border-bottom:1px solid #222; border-right:1px solid #222; background:#555; color:#fff; cursor:pointer; font-size:13px; font-family:"Pixelify Sans", sans-serif; font-optical-sizing:auto; font-weight:700; font-style:normal; } .modal-bigbtn-naked:hover:not(:disabled) { background:#666; } .modal-bigbtn-naked:active:not(:disabled) { border-top-color:#222; border-left-color:#222; border-bottom-color:#aaa; border-right-color:#aaa; } .modal-bigbtn-naked:disabled { opacity:.45; cursor:default; } #signInFormFields .modal-bigbtn-naked + .modal-bigbtn-naked { margin-top:8px; } .modal-divider { text-align:center; font-size:11px; color:#888; margin:16px 0 10px; text-transform:uppercase; letter-spacing:.05em; } .example-list { display:flex; flex-direction:column; gap:6px; margin-top:12px; } .example-item { padding:8px 12px; border-radius:6px; border:1px solid #555; background:#2c2c2c; color:#dde; cursor:pointer; font-size:12px; text-align:left; } .example-item:hover { background:#384450; border-color:#789; } .example-status { font-size:12px; color:#888; text-align:center; padding:8px 0; } .connect-directory-tabs { display:flex; flex-wrap:nowrap; align-items:flex-end; gap:2px; margin-top:16px; border-bottom:1px solid #777; } .connect-directory-tab { position:relative; top:1px; padding:6px 12px; border:1px solid #555; border-bottom-color:#777; border-radius:5px 5px 0 0; background:#333; color:#aaa; cursor:pointer; font:600 12px "Pixelify Sans", sans-serif; white-space:nowrap; } .connect-directory-tab:hover { background:#444; color:#eee; } .connect-directory-tab.active { z-index:1; background:#262626; color:#fff; border-color:#888; border-bottom-color:#262626; } .connect-directory-panel { min-height:240px; max-height:600px; overflow-y:auto; padding-top:8px; } .connect-directory-panel.hidden { display:none; } .serverlist-json-link { display:block; margin-top:10px; font-size:11px; color:#6cf; text-decoration:underline; } .serverlist-json-link:hover { color:#9df; } .server-item { display:block; width:100%; } .favorite-item-row { display:flex; align-items:stretch; gap:6px; } .favorite-item-row .favorite-item { flex:1; min-width:0; } .favorite-remove-btn { flex:0 0 auto; align-self:center; width:22px; height:22px; border-radius:4px; border:1px solid #555; background:#2c2c2c; color:#999; cursor:pointer; font-size:14px; line-height:1; } .favorite-remove-btn:hover { background:#4a2a2a; border-color:#a55; color:#f88; } .server-item-main { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; min-width:0; flex:1; } .server-item-body { min-width:0; flex:1; } .server-item-name-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .server-item-name { font-size:13px; font-weight:700; color:#e8f0ff; min-width:0; line-height:1.25; } .server-item-stats { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; line-height:1.2; } .server-item-users, .server-item-rooms { font-size:13px; font-weight:700; color:#e03333; font-variant-numeric:tabular-nums; white-space:nowrap; } .server-item-sysop { font-size:11px; color:#9ab; margin-top:1px; font-style:italic; line-height:1.25; } .server-item-blurb { font-size:11px; color:#aaa; margin-top:2px; line-height:1.35; } .user-space-item-guests-blocked { position: relative; opacity: 0.72; } .user-space-item-guests-blocked::after { content: ''; position: absolute; inset: 4px 6px; pointer-events: none; background: linear-gradient(to top left, transparent calc(50% - 1.5px), #e03333 0, #e03333 calc(50% + 1.5px), transparent 0), linear-gradient(to top right, transparent calc(50% - 1.5px), #e03333 0, #e03333 calc(50% + 1.5px), transparent 0); } .user-space-item-guests-blocked .server-item-name { text-decoration: line-through; text-decoration-color: #e03333; } .help-modal-box { width:640px; max-width:92vw; max-height:85vh; overflow:hidden; display:flex; flex-direction:column; } /* .help-content no longer sits directly inside .help-modal-box (it's now nested one level deeper, inside .retro-body/.window-body, since these modals gained a real title-bar). Pass flex-grow + scrolling down through that wrapper so .help-content's own flex/overflow rules still apply. */ .help-modal-box .retro-body { flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column; min-height:0; } .help-content { flex:1 1 auto; overflow-y:auto; min-height:0; margin-top:4px; padding-right:6px; } .help-content h2 { font-size:16px; color:#dff0ff; margin:18px 0 8px; } .help-content h2:first-child { margin-top:0; } .help-content h3 { font-size:13px; color:#cde; margin:14px 0 6px; } .help-content p { font-size:13px; color:#ccc; line-height:1.6; margin:0 0 10px; } .help-content ul, .help-content ol { margin:0 0 10px 20px; padding:0; font-size:13px; color:#ccc; line-height:1.6; } .help-content li { margin-bottom:4px; } .help-content img { max-width:100%; border-radius:4px; margin:8px 0; display:block; } .help-content strong { color:#fff; } .help-content code { background:#1a1a1a; border-radius:3px; padding:1px 5px; font-size:12px; color:#9ec; } .help-content a { color:#8cf; text-decoration:underline; } .help-content hr { border:none; border-top:1px solid #444; margin:16px 0; } .room-sim { background:#222222; padding:14px 16px 18px; } .room-sim.hidden { display:none; } /* ---- Layout toggle button in the toolbar ---- */ .layout-toggle-btn { padding:4px 6px; border-radius:4px; border:1px solid #567; background:#2a2a2a; color:#9ab; cursor:pointer; line-height:0; vertical-align:middle; flex-shrink:0; } .layout-toggle-btn:hover:not(:disabled) { background:#384450; color:#dff0ff; } .layout-toggle-btn:disabled { opacity:.35; cursor:default; } /* ---- Tabs dock toggle (move Log/Sounds/Rooms/Prefs/Debug to right column) ---- */ .tabs-dock-toggle-btn { margin-left:auto; padding:3px 5px; border-radius:4px; border:1px solid #567; background:#2a2a2a; color:#9ab; cursor:pointer; line-height:0; flex-shrink:0; } .tabs-dock-toggle-btn:hover:not(:disabled) { background:#384450; color:#dff0ff; } .tabs-dock-toggle-btn:disabled { opacity:.35; cursor:default; } .tabs-dock-toggle-btn.on { background:#345; border-color:#6a9; color:#dff0ff; } /* ---- Column layout (default): simulator is sticky so it stays put while the prop grid scrolls beneath it. Works on any screen width. ---- */ .layout-row-mode #roomSim { display:none; } /* handled below; this is the column default */ .main { flex:1; min-width:0; background:#444444; } #roomSim { position:sticky; top:0; z-index:20; } /* ---- Row layout: simulator becomes a fixed-width side panel; only the prop picker scrolls. Applied via .row-layout class on .layout. ---- */ .row-layout { overflow:hidden; height:100vh; align-items:stretch; } /* Toolbar height in row-layout (bottom prop picker) - prevent spacer collapse */ .row-layout .pal-toolbar { height: 100vh; } .row-layout .main { display:flex; flex-direction:row; overflow:hidden; align-items:stretch; } /* Fixed-width side panel -- deliberately NOT tied to --room-w: a larger room's canvas is fitted (shrunk to fit if needed, see fitRoomFrameToViewport in ui-shell.js) to whatever space is available INSIDE this panel, rather than growing the panel itself, which would eat into #rightCol's prop-picker space. */ /* position:relative (not static) so a docked-but-covered simulator can still raise its z-index above an overlapping floating window (see bringWindowToFront in panel-detach.js) -- static elements ignore z-index entirely. */ .row-layout #roomSim { position:relative; width:544px; max-width:100%; flex-shrink:0; overflow-y:auto; border-right:1px solid #333; } .row-layout #rightCol { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; } /* overflow:hidden (not auto): scroll lives in the Legacy/Modern grids so the Props header + Naked toolbar stay pinned while browsing mid-list. */ .row-layout #propViewerArea { flex:1; min-width:0; min-height:0; overflow:hidden; } .row-layout #propViewerArea.hidden { display:none; } /* Prop picker hidden -> nothing left to protect its space from, so let the simulator grow to fill #main instead of staying pinned to the fixed 544px panel width (fed into fitRoomFrameToViewport in ui-shell.js via #roomSim.clientWidth, so the room itself scales up to use the freed space too, not just this panel). */ .row-layout .main:has(#propViewerArea.hidden), .row-layout .main:has(#propViewerArea.floating) { justify-content:center; } .row-layout .main:has(#propViewerArea.hidden) #roomSim, .row-layout .main:has(#propViewerArea.floating) #roomSim { border-right:none; flex:1 1 auto; width:auto; } /* When the prop picker floats it leaves the flow (position:fixed) but #rightCol keeps its flex:1 -- an empty column that would hold open dead gray space to the right of the (now centered) simulator. Collapse it so the simulator truly centers. Skipped when tabs are docked into #rightCol, which still needs the space (handled below). */ .row-layout:not(.tabs-stacked-right) .main:has(#propViewerArea.floating) #rightCol { flex:0 0 0; width:0; min-width:0; overflow:hidden; } .row-layout #roomSim.hidden { display:none; } .row-layout #roomSim.hidden ~ #rightCol { width:100%; } /* ---- Vertical splitter between the docked simulator and the prop bag (#rightCol) ---- Only makes sense in row layout, with both actually sitting side by side -- hidden the moment either one leaves that arrangement (floats, detaches, is hidden, or the prop bag closes). All the exclusions live in this one selector's specificity so there's no fight with the #roomSim.hidden rule above over which display value wins. */ #mainColSplitter { display:none; } .row-layout .main:not(:has(#roomSim.floating)):not(:has(#roomSim.hidden)):not(:has(#propViewerArea.floating)):not(:has(#propViewerArea.hidden)) #mainColSplitter { display:block; flex:0 0 6px; width:6px; cursor:col-resize; background:transparent; } #mainColSplitter:hover, #mainColSplitter.dragging { background:#4a90d9; } /* ---- Tabs stacked to the right: tabs panel moves into #rightCol above prop picker ---- */ .tabs-stacked-right.row-layout #roomSim { overflow:hidden; } .tabs-stacked-right.row-layout .room-tabs { width:auto; margin:0; flex:1 1 50%; min-height:0; display:flex; flex-direction:column; overflow:hidden; border-left:1px solid #333; background:#222222; } .tabs-stacked-right.row-layout .room-tabs-bar { flex-shrink:0; padding:0 4px; } .tabs-stacked-right.row-layout .room-tab-content { flex:1; min-height:0; height:auto !important; overflow-y:auto; } .tabs-stacked-right.row-layout #rightCol:has(#propViewerArea.hidden) .room-tabs, .tabs-stacked-right.row-layout #rightCol:has(#propViewerArea.floating) .room-tabs { flex:1 1 100%; } /* ---- Horizontal splitter between the stacked tabs and the prop bag (#rightColSplitter) ---- Only shown in the actual stacked arrangement -- hidden the moment either side of it leaves (prop bag hides/floats, or tabs get undocked from #rightCol entirely). */ #rightColSplitter { display:none; } .tabs-stacked-right.row-layout #rightCol:not(:has(#propViewerArea.hidden)):not(:has(#propViewerArea.floating)) #rightColSplitter { display:block; flex:0 0 6px; height:6px; cursor:row-resize; background:transparent; } #rightColSplitter:hover, #rightColSplitter.dragging { background:#4a90d9; } /* ---- Mobile: force column layout regardless of saved preference ---- */ @media (max-width:900px) { .row-layout { overflow:auto; height:auto; align-items:flex-start; } .row-layout .main { flex-direction:column; overflow:visible; } .row-layout #roomSim { position:sticky; top:0; width:auto; border-right:none; overflow-y:visible; } .row-layout #rightCol { overflow:visible; } .row-layout #propViewerArea { overflow-y:visible; } .tabs-stacked-right.row-layout .room-tabs { flex:0 0 auto; max-height:50vh; min-height:200px; border-left:none; } .tabs-stacked-right.row-layout .room-tab-content { max-height:calc(50vh - 32px); } } #roomToggleBtn { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADCElEQVR4AbxVCXarMAyc/IuhmzG+mXMy/ozAxAbaZnmtn2Xt0lg16T98tpbP0oFPAXza/yMAC5n9P5rCuxPI5vMMkDuIt4C8CsBNtuYL7veKiAoSIN8D8gqAbFxrxTwv6nYTAdMUiLgEkv6fjmcBZHM3csNSCqD+U8TOUwYQUUFKAIwyhe+OZwBk83neyqhxROCuSfRUSEC7RiCigoTXjyCeAaCRA/57t1u68jRNsN4oIhAC1XA65hn6CUDe/qrQ/X4fzAbSDK9MIQGQXJRsEhv3PvrRjEkTKOTB+lAnPc6HNkp9vwQwup/XZnIP9nvYlRcEA1hCf7+tVD+FL8ff6rupCcua1v8ZWgyZ0hqQIoZ+BoBpCoBc3f0pk7+4opdfa+Bq5Nn0dkNyAPpAgS0PXpLNeur7JQCoAcg+ZpVlmvWsZ+GfzWdegliDgWyeCuH4iAqoBo6r65cAUj8GWVdyUdWigLJxV8zbdrd2qNxmdosIx9eI1XY4VQ4qDa8E4J9X0upOujNgE3nmLnAkhX0Zj3VlTYt9vwQwTZPtA2VBEg5e9MjeIedSNThUBvp+CeDwo7IjjYhMtf8dcnKrYVmUtV1Lcu4E0COyldQpqjVwRRGBuKCrWNugWtpoq++XAHpEJFW8Yp6XE0VUkADJrPXgAAmQQMQXubWCZOb1/RJAj8hBRl3KTS95JNtdwTEPSouPJMeUMuaVcoPtznFQ3y8B9IgcdHUL20inA45ptFnEKDtAAhHnKdhGUnHQf9Z7ch8JoEfkIKMtZbyFbU6wfyQg1BBYi0PLsaWc850n9/dfgYNc8PgGbHOy/TvJQAIRIarS1h3xBxPIVmoOEwDfWiy35VJ+cQLuQurcKJkO31xWxG9PwE2ghgMB8M3FkpfyyxPABQDfHFrmV2+IpLw4fwUNub0OqhGn3wBsy/4UXasnGWsNnesu5TCBCJCEVx+Xn6GNWH3IZdlkZeM1whpaEdjeEx6rxcJ+aJmbJO570xMACWijLXLVyZE3vzl59pH2jHbyoa9e6ZvN+n8AAAD//wMDTjwAAAAGSURBVAMA3nN0P9tr4gIAAAAASUVORK5CYII=); border-radius:3px; } .room-frame { position:relative; width:var(--room-w); max-width:100%; margin:0 auto; } /* height:auto lets the canvas's intrinsic width/height attributes (set to the room's real pixel size in JS) drive its aspect ratio, so native-size rooms that get shrunk by max-width:100% scale down without distortion. */ #roomCanvas { width:var(--room-w); max-width:100%; height:auto; display:block; image-rendering:pixelated; background:#000; cursor:default; } .room-canvas-interactive { cursor:pointer !important; } .room-statusbar { width:var(--room-w); max-width:100%; height:14px; background:#2a2a2a; color:#ddd; font-size:10px; display:flex; align-items:center; justify-content:space-between; padding:0 4px; box-sizing:border-box; font-family: Geneva, Verdana, sans-serif; white-space:nowrap; margin:0 auto; } .room-statusbar .rsb-center { flex:1; text-align:center; overflow:hidden; } .room-statusbar .rsb-link { color:#6cb2ff; text-decoration:underline; cursor:pointer; } .room-statusbar .rsb-link:hover { color:#9ecbff; } /* Server-name slot doubles as the whisper indicator: clickable to defocus */ .room-statusbar #rsbServerName.rsb-whisper { color:#fff; cursor:pointer; } .room-statusbar #rsbServerName.rsb-whisper:hover { text-decoration:underline; } /* Persistent Authoring Mode indicator -- stays visible the whole time the mode is on, not just a transient flash, so it's impossible to forget it's enabled (see authoring.js). */ .room-statusbar .rsb-authoring { color:#ffb300; font-weight:bold; cursor:pointer; margin:0 4px; flex-shrink:0; } .room-statusbar .rsb-authoring:hover { text-decoration:underline; } .room-statusbar .rsb-authoring.hidden { display:none; } .room-input-row { width:var(--room-w); max-width:100%; height:26px; background:#444; margin:3px auto 0; box-sizing:border-box; display:flex; align-items:stretch; } /* #emojiPickerBtn itself is sized/centered by emoji-picker.js's own injected styles (26x26, flex-centered) -- this just sizes the sunglasses.webp icon inside it. */ .emoji-btn-icon { width:16px; height:16px; object-fit:contain; display:block; } .room-input-row input { flex:1 1 auto; min-width:0; height:100%; box-sizing:border-box; border:none; background:transparent; color:#fff; font-size:12px; padding:0 6px; outline:none; font-family: Geneva, Verdana, sans-serif; } .splash-overlay { position:absolute; inset:0; cursor:pointer; } /* Splash screens are pre-connect and always the classic 512x384 size -- not room-dimension dependent. */ .splash-overlay img { width:512px; height:384px; image-rendering:pixelated; display:block; } .splash-cycle-btn { position:absolute; top:10px; padding:4px 10px; border-radius:4px; border:1px solid #555; background:rgba(0,0,0,.55); color:#ccc; font-size:13px; cursor:pointer; z-index:2; } .splash-cycle-prev { left:10px; } .splash-cycle-next { right:10px; } .splash-cycle-btn:hover { background:rgba(0,0,0,.75); } .splash-cycle-btn.hidden { display:none; } /* Neon "Now" splash (index 0) -- sits in the same 512x384 frame as legacy artwork. */ .splash-neon { --sn-bg: #050508; --sn-primary: #0ff; --sn-secondary: #f0f; --sn-tertiary: #ff0; --sn-text: #fff; --sn-dim: #667; position: relative; width: 512px; height: 384px; overflow: hidden; background: var(--sn-bg); color: var(--sn-text); font-family: 'Orbitron', sans-serif; cursor: pointer; } .splash-neon.hidden { display: none !important; } .splash-neon-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .splash-neon-grid { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(0, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(rgba(0, 255, 255, 0.04) 1px, transparent 1px); background-size: 40px 40px; animation: splashNeonGridMove 20s linear infinite; } @keyframes splashNeonGridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(40px, 40px); } } .splash-neon-scanlines { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 4px ); } .splash-neon-shapes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .splash-neon-shape { position: absolute; border: 1.5px solid; opacity: 0.22; animation: splashNeonFloat 10s ease-in-out infinite; } .splash-neon-shape-1 { width: 36px; height: 36px; top: 12%; left: 8%; border-color: var(--sn-primary); transform: rotate(45deg); } .splash-neon-shape-2 { width: 52px; height: 52px; top: 62%; right: 10%; border-color: var(--sn-secondary); border-radius: 50%; animation-delay: -2s; } .splash-neon-shape-3 { width: 28px; height: 28px; bottom: 18%; left: 16%; border-color: var(--sn-tertiary); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); animation-delay: -4s; } @keyframes splashNeonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .splash-neon-corner { position: absolute; width: 36px; height: 36px; border: 1.5px solid var(--sn-primary); opacity: 0.35; z-index: 2; pointer-events: none; } .splash-neon-corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; } .splash-neon-corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; } .splash-neon-corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; } .splash-neon-corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; } .splash-neon-body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 16px 28px; text-align: center; } .splash-neon-badge { font-size: 0.55rem; letter-spacing: 3px; color: var(--sn-primary); text-transform: uppercase; margin-bottom: 8px; opacity: 0; animation: splashNeonFadeIn 0.8s ease 0.35s forwards; } .splash-neon-badge::before { content: '// '; color: var(--sn-secondary); } .splash-neon-title { margin: 0 0 10px; font-size: 2.05rem; font-weight: 900; line-height: 1.05; } .splash-neon-welcome { background: linear-gradient(135deg, var(--sn-primary) 0%, var(--sn-secondary) 50%, var(--sn-tertiary) 100%); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: splashNeonGlow 3s ease-in-out infinite, splashNeonGradient 5s linear infinite; filter: drop-shadow(0 0 14px rgba(0, 255, 255, 0.45)); } @keyframes splashNeonGradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes splashNeonGlow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(0, 255, 255, 0.45)); } 50% { filter: drop-shadow(0 0 28px rgba(255, 0, 255, 0.75)); } } .splash-neon-subtitle { margin: 0 0 18px; font-size: 0.62rem; color: var(--sn-dim); letter-spacing: 4px; text-transform: uppercase; opacity: 0; animation: splashNeonFadeIn 0.8s ease 0.7s forwards; } .splash-neon-btn-wrap { opacity: 0; animation: splashNeonFadeIn 0.8s ease 1.05s forwards; } .splash-neon-btn { display: inline-block; padding: 8px 22px; font-family: 'Orbitron', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--sn-primary); border: 1.5px solid var(--sn-primary); border-radius: 3px; background: transparent; position: relative; overflow: hidden; transition: color 0.25s ease; } .splash-neon-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--sn-primary); transition: left 0.25s ease; z-index: -1; } .splash-neon-btn:hover { color: var(--sn-bg); } .splash-neon-btn:hover::before { left: 0; } @keyframes splashNeonFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .splash-neon-version, .splash-neon-time { position: absolute; bottom: 10px; z-index: 2; font-size: 0.52rem; letter-spacing: 1.5px; pointer-events: none; } .splash-neon-version { left: 12px; color: var(--sn-dim); } .splash-neon-time { right: 12px; color: var(--sn-primary); } .splash-neon-trail { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--sn-primary); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 4; opacity: 0; } .splash-neon-trail.on { opacity: 0.55; } .room-namecontrols-btn { padding:3px 10px; border-radius:4px; border:1px solid #555; background:#2a2a2a; color:#ccc; font-size:11px; cursor:pointer; } .room-namecontrols-btn:hover { background:#384450; } .name-edit-popover { position:absolute; top:32px; left:0; z-index:5; background:#2a2a2a; border:1px solid #567; border-radius:6px; padding:8px; display:flex; gap:6px; } .name-edit-popover.hidden { display:none; } .name-edit-popover input { background:#1a1a1a; border:1px solid #555; color:#eee; border-radius:4px; padding:4px 6px; font-size:12px; width:140px; } .name-edit-popover button { padding:4px 10px; border-radius:4px; border:1px solid #567; background:#345; color:#dff0ff; font-size:12px; cursor:pointer; } .reset-everything-btn { border-color:#644; background:#3a2424; color:#e8b8b8; } .reset-everything-btn:hover { background:#4a2c2c; } .room-info-popover { flex-direction:column; align-items:stretch; width:220px; } .room-info-popover label { font-size:11px; color:#9ab; margin-top:2px; } .room-info-popover input[type="text"] { width:100%; box-sizing:border-box; } .room-info-popover input[type="file"] { font-size:11px; color:#ccc; } .room-info-popover .room-info-actions { display:flex; gap:6px; margin-top:6px; } .room-info-popover .room-info-actions button { flex:1; } .intro-getstarted-btn { margin-top:14px; } .room-list-wrap { display:flex; gap:4px; height:100%; padding:4px; box-sizing:border-box; } .room-list { flex:1; overflow-y:auto; font-size:11px; color:#ccc; min-width:0; } .room-list-btns { display:flex; flex-direction:column; gap:4px; align-items:stretch; } .room-list-find { display:flex; flex-direction:row; align-items:center; gap:4px; justify-content:flex-end; } .room-list-find-input { width:120px; box-sizing:border-box; padding:3px 6px; border-radius:4px; border:1px solid #555; background:#1a1a1a; color:#eee; font-size:11px; } .room-list-find-input:focus { outline:none; border-color:#6a9; } .room-list-find .room-namecontrols-btn.on { background:#345; border-color:#6a9; color:#dff0ff; } .sound-list-wrap { height:100%; padding:4px; box-sizing:border-box; overflow-y:auto; } .rlist-item { display:grid; grid-template-columns:36px minmax(0, 1fr) 40px 40px 110px; gap:4px; padding:2px 4px; cursor:pointer; border-radius:3px; user-select:none; } .rlist-item.rlist-reorderable { grid-template-columns:16px 36px minmax(0, 1fr) 40px 40px 110px; } /* Non-operators: hide room/user ID columns (see listViewerSeesIds). */ .room-list.rlist-no-ids .rlist-item { grid-template-columns:minmax(0, 1fr) 40px 40px 110px; } .room-list.rlist-no-ids .rlist-item.rlist-reorderable { grid-template-columns:16px minmax(0, 1fr) 40px 40px 110px; } .room-list.rlist-no-ids .rlist-item.users-row { grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 32px; } .rlist-item:hover:not(.rlist-header) { background:#334; } .rlist-item.selected { background:#345; color:#dff0ff; } .rlist-item.rlist-header { cursor:default; color:#678; font-size:10px; border-bottom:1px solid #444; padding-bottom:3px; margin-bottom:2px; border-radius:0; position:sticky; top:0; z-index:1; background:#2c2c2c; } .rlist-item .rlist-id { color:#678; font-size:10px; } .rlist-item.selected .rlist-id { color:#9bc; } .rlist-item .rlist-name { display:flex; align-items:baseline; gap:4px; min-width:0; overflow:hidden; white-space:nowrap; } .rlist-item .rlist-name-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rlist-item .rlist-artist { color:#678; font-size:10px; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Users column: Ø (empty room) stays dim; an occupied room's count is highlighted. */ .rlist-item .rlist-users { color:#678; font-size:10px; text-align:center; } .rlist-item .rlist-users.occupied { color:#9fd49f; } .rlist-item.rlist-header .rlist-users { color:#678; } .rlist-item .rlist-mph { color:#9ab0c8; font-size:10px; text-align:right; } .rlist-item.rlist-header .rlist-mph { color:#678; } /* Architect room reorder: grip handle is the only drag source (row stays clickable). */ .rlist-item .rlist-handle { display:inline-flex; align-items:center; justify-content:center; width:16px; margin:0 -2px 0 -2px; color:#5a6a7a; border-radius:3px; cursor:grab; touch-action:none; } .rlist-item .rlist-handle-header { cursor:default; pointer-events:none; } .rlist-item .rlist-handle-icon { display:block; fill:currentColor; opacity:0.75; } .rlist-item:hover:not(.rlist-header) .rlist-handle, .rlist-item.selected .rlist-handle { color:#9ab0c8; } .rlist-item .rlist-handle:hover { color:#d0e4f8; background:rgba(255,255,255,0.06); } .rlist-item .rlist-handle:active { cursor:grabbing; } .room-list.rlist-reordering .rlist-item { cursor:grabbing; } .rlist-item.rlist-dragging { opacity:0.35; background:#2a3340; } .rlist-item.rlist-drag-over:not(.rlist-dragging) { box-shadow: inset 0 2px 0 0 #6aa8e0; background:#2f3a48; } .rlist-item.users-row { grid-template-columns:36px minmax(0,1fr) 52px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 32px; } .rlist-item .rlist-rank { color:#9ab0c8; font-size:10px; text-transform:capitalize; } .rlist-item .rlist-room { color:#9ab0c8; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rlist-item .rlist-connected, .rlist-item .rlist-total { color:#9ab0c8; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rlist-item.rlist-header .rlist-rank, .rlist-item.rlist-header .rlist-room, .rlist-item.rlist-header .rlist-connected, .rlist-item.rlist-header .rlist-total { color:#678; } .rlist-item.rlist-hidden { opacity: 0.55; } .rlist-item.rlist-closed:not(.rlist-hidden) { opacity: 0.75; } .rlist-item .rlist-status-tag, .rlist-item .rlist-hidden-tag { flex-shrink:0; font-style: italic; opacity: 0.85; color:#9ab0c8; } .slist-item { padding:2px 4px; cursor:pointer; border-radius:3px; font-size:11px; color:#ccc; } .slist-item:hover { background:#334; } .slist-item.selected { background:#345; color:#dff0ff; } .sound-list-wrap.sounds-disabled .slist-item { opacity:0.45; cursor:default; pointer-events:none; } /* ---- Tabbed panel under the room + chat input: Log, Sounds, Rooms, Preferences, Debug. Sounds/Rooms are currently empty placeholders to shake out layout/space issues ahead of their real implementation. Shares the simulator's fixed width/centering since it lives inside #roomSim. Content height is set dynamically via JS (see updateTabPanelHeight) to use available vertical space rather than a fixed 120px. ---- */ .room-tabs { width:var(--room-w); max-width:100%; margin:6px auto 0; } .room-tabs-bar { display:flex; align-items:center; gap:2px; } .room-tab-btn { padding:5px 10px; border:1px solid #444; border-bottom:none; background:#2a2a2a; color:#999; font-size:11px; cursor:pointer; border-radius:5px 5px 0 0; } .room-tab-btn.active { background:#383838; color:#dff0ff; } .room-tab-btn:hover:not(.active) { background:#333; color:#bbb; } .disconnect-btn { margin-left:auto; padding:5px 14px; border:1px solid #644; border-radius:4px; background:#3a2424; color:#e8b8b8; font-size:11px; cursor:pointer; } .disconnect-btn:hover { background:#4a2c2c; } .disconnect-btn.hidden { display:none; } .room-tab-content { border:1px solid #444; background:#2c2c2c; height:120px; overflow-y:auto; padding:8px 10px; box-sizing:border-box; } .room-tab-content.hidden { display:none; } .chat-log { font-family: Geneva, Verdana, sans-serif; font-size:11px; color:#ccc; line-height:1.5; white-space:pre-wrap; } .chat-log .log-system { color:#e08a8a; } .chat-log .log-link { color:#6cb2ff; text-decoration:underline; word-break:break-all; } .chat-log .log-link:hover { color:#9ecbff; } .chat-emoji { height:1.3em; width:auto; vertical-align:-0.3em; cursor:default; } .chat-emoji-preview { position:fixed; width:64px; height:64px; z-index:300; pointer-events:none; display:none; background:#000; border:1px solid #444; border-radius:4px; padding:2px; box-sizing:border-box; object-fit:contain; box-shadow:0 4px 14px rgba(0,0,0,.6); } .chat-emoji-preview.visible { display:block; } /* Per-line local-time stamp (from the stored UTC time) -- hidden until the mouse is over the log, then shown along the right edge. */ .chat-log .log-time { display:none; float:right; margin-left:10px; color:#7a7a7a; font-size:10px; } .chat-log:hover .log-time { display:block; } .prefs-row { position:relative; margin-bottom:10px; } .prefs-checkbox { display:flex; align-items:center; gap:6px; font-size:12px; color:#ccc; margin-bottom:8px; } .prefs-group { margin-top:4px; } .prefs-group-label { font-size:11px; color:#888; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; } .prefs-radio { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#ccc; margin-right:14px; } .prefs-slider { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12px; color:#ccc; } .prefs-slider input { width:120px; } .prefs-slider output { min-width:34px; color:#aaa; font-variant-numeric:tabular-nums; } /* ---- Room / Spot Info viewer (Debug tab) ---- */ /* Floating Room Info window (shares the paint palette's floating-window feel) */ .floating-window { position:fixed; z-index:60; width:320px; max-width:92vw; background:#34343a; border:1px solid rgba(0,0,0,.35); border-radius:5px; box-shadow:0 6px 22px rgba(0,0,0,.55); display:flex; flex-direction:column; font-family:system-ui,sans-serif; } .floating-window.hidden { display:none; } .floating-window .fw-title { cursor:move; background:#3a3a40; color:#ddd; font-size:11px; font-weight:600; padding:5px 9px; border-radius:5px 5px 0 0; display:flex; justify-content:space-between; align-items:center; user-select:none; } .floating-window .fw-close { cursor:pointer; color:#aaa; font-size:13px; line-height:1; padding:0 2px; } .floating-window .fw-close:hover { color:#fff; } /* Every classic-stylesheets OS skin already draws its own close affordance on button[data-close] -- winxp/win9x/cde a real icon (mask-image or background-image), macos9 a plain small square with no icon at all -- body always carries a data-dialog-os (see index.html's default), so this literal "X" text is only ever layered on top of that, not a fallback for a themeless state. Under winxp specifically the theme's ::after icon and this text rendered as two overlapping X's; zeroing the font-size here removes the glyph everywhere without touching each theme's own close-button styling. */ body[data-dialog-os] .floating-window .fw-close { font-size: 0; } .floating-window .fw-toolbar { display:flex; gap:10px; align-items:center; padding:7px 9px 4px; border-bottom:1px solid #333; flex-wrap:wrap; } .floating-window .fw-toolbar .prefs-checkbox { margin-bottom:0; } .floating-window .room-info-debug { overflow-y:auto; max-height:min(60vh,460px); padding:8px 9px 10px; } /* Room Inspector: larger + split panes (list + detail). */ #roomInfoWindow { width: min(920px, 96vw); height: min(660px, 86vh); max-width: 96vw; } #roomInfoWindow .room-info-debug { flex: 1; max-height: none; overflow: hidden; } /* Profile / DM social windows */ .social-window { width:340px; left:40px; top:80px; z-index:70; } .social-window-body { padding:10px 12px 12px; max-height:min(70vh,520px); overflow-y:auto; font-size:12px; color:#ddd; } .social-profile-head { display:flex; gap:10px; align-items:flex-start; margin-bottom:8px; } .social-avatar { width:72px; height:72px; flex-shrink:0; background:transparent; border:none; display:flex; align-items:center; justify-content:center; overflow:hidden; } .social-avatar img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; } /* Profile window: no frame — prop transparency shows the dialog surface. */ #profileWindow .social-avatar { background: transparent; border: none; box-shadow: none; } .social-avatar-placeholder { color:#666; font-size:28px; font-weight:bold; } .social-username { font-size:14px; font-weight:700; color:#fff; } .social-handle { color:#9ab; font-size:11px; margin-bottom:4px; } .social-tagline { color:#cde; font-style:italic; margin-bottom:4px; } .social-presence { color:#8c8; font-size:11px; } .social-desc { white-space:pre-wrap; color:#ccc; margin:6px 0; line-height:1.35; } .social-link a { color:#8cf; word-break:break-all; font-size:11px; } .social-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .social-muted { color:#888; font-size:11px; } .social-muted.err { color:#e88; } .social-danger { color:#c44 !important; } .acct-profile-section textarea { width:100%; box-sizing:border-box; resize:vertical; font:inherit; } .acct-profile-preview { align-items:center; } /* ---- Contact Center (AIM/ICQ-style persistent contact window, dm-ui.js) -- ONE window. Online/All/Pending/Blocked (dmhubRenderFriendsMain) is the home screen inside #dmhubDetailPane; picking a buddy/thread row or a system-mail item swaps that same pane's content over to DM chat / account settings / a system folder, with a back button to return home. It's a real classic-stylesheets .window/.title-bar box (see dialog-classic-themes.generated.css); rules below are the app-specific bits that theme can't know about (avatar colors, tree-row layout, badges). ---- */ .floating-window.dmhub-window { /* Sized for the detail pane (account/chat forms), not just the tree -- it's the same window now, so it needs to fit both. */ width: min(320px, 90vw); height: min(480px, 84vh); left: 44px; top: 52px; z-index: 72; /* Clip to the rounded corners -- without this, a form pane that grows past the fixed height (see .dmhub-main min-height fix below) renders past the window's own bottom edge instead of being clipped/scrolled. */ overflow: hidden; } /* My Account is a separate window from Buddy List now (see index.html) -- offset its default position so opening both doesn't stack them exactly on top of each other. Each is still independently draggable afterward. */ #accountWindow.dmhub-window { left: 96px; top: 96px; } .floating-window.dmhub-window.hidden { display: none; } /* Conversations: starts docked to #messagesWindow's right edge (JS: dmhubSyncConversationsDock overwrites left/top/height from the Buddy List's own rect while docked). Draggable by its own title bar like any other floating window (dmhubMakeConversationsDraggable) -- dragging it (or the Buddy List) back within snapping distance re-docks it, see the HTML comment on #conversationsWindow. */ #conversationsWindow.dmhub-window { width: min(360px, 90vw); } /* Conversation tabs reuse the exact same real