diff --git a/internal/server/web/static/terminal.js b/internal/server/web/static/terminal.js index ed8a8c7..aaef8e4 100644 --- a/internal/server/web/static/terminal.js +++ b/internal/server/web/static/terminal.js @@ -10,6 +10,8 @@ const touch = matchMedia('(pointer: coarse)').matches; const desk = !touch; // drag and drop, splits: computers only if (touch) document.body.classList.add('touch'); + const ua = (navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent; + if (/^Win/i.test(ua) || /Windows/.test(navigator.userAgent)) document.body.classList.add('win'); const $ = id => document.getElementById(id); const statusEl = $('status'), area = $('area'), tablist = $('tablist'), addBtn = $('tabadd'), floatAdd = $('floatadd'), addMenu = $('addmenu'), hint = $('hint'), mark = $('tabmark'); diff --git a/internal/server/web/templates/terminal.html b/internal/server/web/templates/terminal.html index 0284139..7428ba3 100644 --- a/internal/server/web/templates/terminal.html +++ b/internal/server/web/templates/terminal.html @@ -73,11 +73,14 @@ /* The terminals' area. */ .area { position:relative; flex:1; min-height:0; margin:12px 16px 16px; border:1px solid var(--border); border-radius:10px; background:#0c0f13; overflow:hidden; } body.multi .area { margin-top:0; border-top-left-radius:0; } - .float-add { position:absolute; top:8px; right:38px; z-index:6; width:28px; height:28px; padding:0; display:inline-flex; + .float-add { position:absolute; top:8px; right:10px; z-index:6; width:28px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:17px; line-height:1; color:var(--text); background:transparent; border:1px solid var(--border); opacity:.28; transition:opacity .25s ease, background .25s ease, top .25s ease; } /* One tab split in panes: below the panes' title bars, clear of their close buttons. */ body.split1 .float-add { top:42px; } + /* Windows draws a wide scrollbar in the terminal: the "+" keeps clear of it. */ + body.win .float-add { right:38px; top:16px; } + body.win.split1 .float-add { top:48px; } .float-add:hover, .float-add:focus-visible { opacity:1; background:var(--panel); } body.multi .float-add { opacity:0; pointer-events:none; } .tabview { position:absolute; inset:8px; opacity:0; visibility:hidden; transform:translateY(4px) scale(.995);