mirror of
https://github.com/tailscale/tailscale.git
synced 2025-02-28 11:17:33 +00:00
ab159f748b
Reduces the amount of boilerplate to render the UI and makes it easier to respond to state changes (e.g. machine getting authorized, netmap changing, etc.) Preact adds ~13K to our bundle size (5K after Brotli) thus is a neglibible size contribution. We mitigate the delay in rendering the UI by having a static placeholder in the HTML. Required bumping the esbuild version to pick up evanw/esbuild#2349, which makes it easier to support Preact's JSX code generation. Fixes #5137 Fixes #5273 Signed-off-by: Mihai Parparita <mihai@tailscale.com>
76 lines
1.5 KiB
CSS
76 lines
1.5 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%);
|
|
}
|