mirror of
https://github.com/tailscale/tailscale.git
synced 2025-12-29 06:26:31 +00:00
9a2171e4ea
Makes the terminal container DOM node as large as the window (except for the header) via flexbox. The xterm.js terminal is then sized to fit via xterm-addon-fit. Once we have a computed rows/columns size, and we can tell the SSH session of the computed size. Required introducing an IPNSSHSession type to allow the JS to control the SSH session once opened. That alse allows us to programatically close it, which we do when the user closes the window with the session still active. I initially wanted to open the terminal in a new window instead (so that it could be resizable independently of the main window), but xterm.js does not appear to work well in that mode (possibly because it adds an IntersectionObserver to pause rendering when the window is not visible, and it ends up doing that when the parent window is hidden -- see xtermjs/xterm.js@87dca56dee) Fixes #5150 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
80 lines
1.6 KiB
CSS
80 lines
1.6 KiB
CSS
/* Copyright (c) 2022 Tailscale Inc & AUTHORS All rights reserved. */
|
|
/* Use of this source code is governed by a BSD-style */
|
|
/* license that can be found in the LICENSE file. */
|
|
|
|
@import "xterm/css/xterm.css";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
.link {
|
|
@apply text-blue-600;
|
|
}
|
|
|
|
.link:hover {
|
|
@apply underline;
|
|
}
|
|
|
|
.button {
|
|
@apply font-medium py-1 px-2 rounded-md border border-transparent text-center cursor-pointer;
|
|
transition-property: background-color, border-color, color, box-shadow;
|
|
transition-duration: 120ms;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
|
|
min-width: 80px;
|
|
}
|
|
.button:focus {
|
|
@apply outline-none ring;
|
|
}
|
|
.button:disabled {
|
|
@apply pointer-events-none select-none;
|
|
}
|
|
|
|
.input {
|
|
@apply appearance-none leading-tight rounded-md bg-white border border-gray-300 hover:border-gray-400 transition-colors px-3;
|
|
height: 2.375rem;
|
|
}
|
|
|
|
.input::placeholder {
|
|
@apply text-gray-400;
|
|
}
|
|
|
|
.input:disabled {
|
|
@apply border-gray-200;
|
|
@apply bg-gray-50;
|
|
@apply cursor-not-allowed;
|
|
}
|
|
|
|
.input:focus {
|
|
@apply outline-none ring border-transparent;
|
|
}
|
|
|
|
.select {
|
|
@apply appearance-none py-2 px-3 leading-tight rounded-md bg-white border border-gray-300;
|
|
}
|
|
|
|
.select-with-arrow {
|
|
@apply relative;
|
|
}
|
|
|
|
.select-with-arrow .select {
|
|
width: 100%;
|
|
}
|
|
|
|
.select-with-arrow::after {
|
|
@apply absolute;
|
|
content: "";
|
|
top: 50%;
|
|
right: 0.5rem;
|
|
transform: translate(-0.3em, -0.15em);
|
|
width: 0.6em;
|
|
height: 0.4em;
|
|
opacity: 0.6;
|
|
background-color: currentColor;
|
|
clip-path: polygon(100% 0%, 0 0%, 50% 100%);
|
|
}
|
|
|
|
body.ssh-active #ssh-form {
|
|
@apply hidden;
|
|
}
|