/* ============================================================================ EMP webclient overrides — loaded last, after webclient.css + goldenlayout. Focus: make the in-browser MUD client usable on phones/tablets. The stock client is desktop-first (GoldenLayout drag tabs, fixed paddings); these rules adapt it to narrow / touch screens and kill the small horizontal overflow. Desktop is left untouched (all changes are inside width media queries). ============================================================================ */ /* --- Always: prevent the tiny horizontal scroll some layouts introduce --- */ /* Root cause on mobile: the default margin (8px) offsets the whole layout, and #main-sub uses content-box with 8px padding so it computes wider than the viewport. Reset both so the client sits flush at 0..100%. */ html, body { max-width: 100%; overflow-x: hidden; margin: 0 !important; padding: 0 !important; } /* The connect/login overlay ships with fixed dimensions that can exceed the viewport (causing a horizontal scrollbar) on both desktop and mobile. Cap it at the viewport width everywhere; finer mobile styling is in the media query. */ #connecting, .connecting { max-width: 100% !important; box-sizing: border-box !important; } /* ============================ Phones (narrow) ============================== */ @media (max-width: 600px) { /* The split containers carry a small left offset on desktop that pushes the layout a few px past the right edge on mobile. Pin them flush to 0..100% and force border-box so any internal padding can't widen them. */ #main, #main-sub, #clientwrapper, #wrapper { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } /* Output window: use the full width, comfortable mobile text size. */ #messagewindow, .content { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* its 9.6px padding must not widen it */ padding: .5rem .6rem !important; font-size: 15px !important; line-height: 1.45 !important; -webkit-text-size-adjust: 100%; word-break: break-word; /* long unbroken MUD output / URLs wrap */ overflow-wrap: anywhere; } /* Input row: make it a flush, full-width bar that won't overflow. */ #inputcontrol, #inputform, #input { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; } #inputfield, .inputfield, textarea#inputfield { width: 100% !important; box-sizing: border-box; font-size: 16px !important; /* 16px stops iOS Safari auto-zoom on focus */ padding: .55rem .6rem !important; min-height: 44px; /* comfortable touch target */ } /* Send button (if the input row shows one) sized for thumbs. */ #inputsend, .inputsend, #inputcontrol button { min-height: 44px; min-width: 44px; font-size: 15px !important; } /* GoldenLayout: tabs/headers are tiny drag targets on desktop. Enlarge them and let them wrap instead of clipping when several panes are open. */ .lm_header { height: auto !important; } .lm_header .lm_tabs { display: flex; flex-wrap: wrap; } .lm_header .lm_tab { padding: .35rem .6rem !important; font-size: 13px !important; min-height: 34px; line-height: 1.6; } /* The drag handle / splitter is hard to grab with a finger; widen it. */ .lm_splitter { min-height: 10px !important; min-width: 10px !important; } .gutter { background-size: cover; } .gutter-vertical { height: 10px !important; cursor: row-resize; } .gutter-horizontal { width: 10px !important; cursor: col-resize; } /* The connect/login overlay (#connecting) should not run off-screen. */ #connecting, .connecting { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; padding: 1rem .8rem !important; box-sizing: border-box !important; font-size: 14px !important; word-break: break-word; } } /* ===================== Short landscape phones ============================= */ /* When a phone is rotated to landscape it becomes very short; trim vertical chrome so the output area keeps as much height as possible. */ @media (max-height: 450px) and (orientation: landscape) { .lm_header .lm_tab { min-height: 28px; padding: .2rem .5rem !important; } #inputfield, .inputfield { min-height: 38px; } #messagewindow, .content { padding: .35rem .5rem !important; } } /* =============================== Tablets ================================== */ @media (min-width: 601px) and (max-width: 900px) { #messagewindow, .content { font-size: 15px !important; } #inputfield, .inputfield { font-size: 16px !important; min-height: 42px; } .lm_header .lm_tab { min-height: 32px; } } /* ============================================================= */ /* EMP web-client redesign (option B): top bar + side rail */ /* + screen-reader mode. Layout wraps Evennia's #toolbar/#main. */ /* ============================================================= */ :root{ --emp-bg:#0d1117; --emp-bg2:#10161f; --emp-panel:#161d29; --emp-line:#243044; --emp-line2:#2c3a52; --emp-text:#d7dee8; --emp-dim:#8a98ac; --emp-accent:#3fb6c9; --emp-accent2:#5aa2ff; --emp-gold:#e8c468; } #emp-shell{display:flex;flex-direction:column;height:100%;min-height:0; background:var(--emp-bg);color:var(--emp-text); font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif} /* --- top bar --- */ #emp-bar{display:flex;align-items:center;gap:.6rem;flex:none; padding:.45rem .8rem;background:linear-gradient(180deg,var(--emp-bg2),var(--emp-bg)); border-bottom:1px solid var(--emp-line)} #emp-brand{font-weight:800;letter-spacing:.4px;color:#fff;display:flex;align-items:center;gap:.45rem} #emp-brand .emp-sub{font-weight:500;color:var(--emp-dim);font-size:.8rem;letter-spacing:0} #emp-brand .emp-dot{width:9px;height:9px;border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--emp-accent2),var(--emp-accent)); box-shadow:0 0 8px rgba(63,182,201,.6)} #emp-bar-spacer{flex:1} #emp-sr-wrap{display:flex;align-items:center;gap:.35rem;color:var(--emp-dim); font-size:.82rem;cursor:pointer;user-select:none} #emp-sr-wrap input{cursor:pointer} #emp-refresh,#emp-exit{font-size:.8rem;color:var(--emp-text);background:var(--emp-panel); border:1px solid var(--emp-line2);border-radius:6px;padding:.3rem .6rem;cursor:pointer; text-decoration:none;line-height:1.2} #emp-refresh:hover,#emp-exit:hover{border-color:var(--emp-accent);color:#fff} /* --- body: rail + main --- */ #emp-body{display:flex;flex:1;min-height:0} #emp-rail{flex:none;width:248px;overflow-y:auto;padding:.7rem; background:var(--emp-bg2);border-right:1px solid var(--emp-line); display:flex;flex-direction:column;gap:.7rem} #emp-main{flex:1;min-width:0;position:relative;display:flex;flex-direction:column} /* Evennia's client area must fill #emp-main */ #emp-main #main{flex:1;min-height:0} /* --- panels --- */ .emp-panel{background:var(--emp-panel);border:1px solid var(--emp-line); border-radius:9px;padding:.65rem .7rem} .emp-panel h3{margin:0 0 .5rem;font-size:.78rem;text-transform:uppercase; letter-spacing:.6px;color:var(--emp-dim);font-weight:700; display:flex;align-items:center;justify-content:space-between} .emp-count{background:var(--emp-bg);border:1px solid var(--emp-line2);border-radius:10px; padding:0 .45rem;color:var(--emp-accent);font-size:.78rem;font-weight:700} .emp-empty{color:var(--emp-dim);font-size:.82rem;margin:.2rem 0} .emp-mini{color:var(--emp-dim);font-size:.82rem} .emp-mini b{color:var(--emp-text)} .emp-status-head{display:flex;align-items:center;gap:.6rem} #emp-avatar{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden} #emp-avatar svg{width:44px;height:44px;display:block} .emp-name{font-weight:700;color:#fff;font-size:.98rem;line-height:1.1} .emp-cg{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--emp-line)} .emp-game{display:flex;align-items:center;gap:.5rem;padding:.4rem 0; border-bottom:1px solid var(--emp-line)} .emp-game:last-child{border-bottom:none} .emp-game-main{flex:1;min-width:0} .emp-game-name{display:block;color:#fff;font-weight:600;font-size:.88rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .emp-game-meta{display:block;color:var(--emp-dim);font-size:.74rem} .emp-game-play{flex:none;font-size:.76rem;background:var(--emp-accent);color:#08101c; border:none;border-radius:5px;padding:.25rem .55rem;cursor:pointer;font-weight:700} .emp-game-play:hover{background:var(--emp-accent2)} .emp-who-name{color:var(--emp-text);font-size:.85rem;padding:.18rem 0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* --- screen-reader mode: hide the visual rail, keep the text feed clean --- */ body.emp-sr #emp-rail{display:none} body.emp-sr #emp-brand .emp-dot{display:none} /* give the text view comfortable, high-contrast typography */ body.emp-sr #messagewindow,body.emp-sr .content{font-size:16px !important;line-height:1.6 !important} /* --- responsive: stack the rail on top on narrow screens --- */ @media (max-width: 760px){ #emp-body{flex-direction:column} #emp-rail{width:auto;flex-direction:row;flex-wrap:wrap;border-right:none; border-bottom:1px solid var(--emp-line);max-height:42vh} #emp-rail .emp-panel{flex:1;min-width:140px} #emp-bar{flex-wrap:wrap} } /* GoldenLayout fallback: when GoldenLayout can't load (blocked CDN), present the plain text feed + input as a simple usable column inside #emp-main. */ body.emp-no-gl #emp-main{display:flex;flex-direction:column} body.emp-no-gl #toolbar{flex:none} body.emp-no-gl #main{flex:1;min-height:0;display:flex;flex-direction:column} body.emp-no-gl #main-sub{flex:1;min-height:0;display:flex} body.emp-no-gl #messagewindow{flex:1;min-height:0;overflow-y:auto; padding:.7rem 1rem;background:var(--emp-bg);color:var(--emp-text); font-family:DejaVu Sans Mono,Menlo,Consolas,monospace;font-size:15px;line-height:1.5; white-space:pre-wrap;word-break:break-word} body.emp-no-gl #input{flex:none;border-top:1px solid var(--emp-line);background:var(--emp-bg2)} body.emp-no-gl #inputfield{width:100%;min-height:42px;background:var(--emp-bg); color:var(--emp-text);border:1px solid var(--emp-line2);border-radius:6px;padding:.5rem .7rem}