mirror of
https://github.com/netbirdio/netbird.git
synced 2026-04-30 14:16:38 +00:00
504dceedf3
Stage 1 of the client/ui (Fyne) replacement. Adds a new client/ui-wails module that runs on Linux/macOS/Windows from a single React + Vite + Tailwind frontend driven by a thin gRPC services layer in Go. - Single-module integration (no submodule): merge Wails3 into root go.mod with build tags !android !ios !freebsd !js so cross-compiles on those targets exclude the package automatically. - Seven gRPC-bound services: Connection, Settings, Networks, Profiles, Debug, Update, Peers. Peers bridges Status polling and SubscribeEvents to the Wails event bus (netbird:status, netbird:event). - Tray + window shell mirrors the Fyne menu 1:1 with hide-on-close, SIGUSR1 / Windows named-event for external "show window" triggers. - React pages cover functional parity for Status, Settings (3 tabs), Networks (3 tabs), Profiles, Debug, Update, QuickActions, LoginUrl. - SVG-sourced tray icons (12 source SVGs incl. macOS template variants) rasterized to PNG via task common:generate:tray:icons. - Linux launcher sets WEBKIT_DISABLE_DMABUF_RENDERER=1 in the .desktop Exec= line and in task linux:run so the app renders correctly under RDP, VirtualBox, KVM, and bare WMs (Fluxbox/dwm) without DRM access.
158 lines
2.7 KiB
CSS
158 lines
2.7 KiB
CSS
:root {
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
|
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
font-weight: 400;
|
|
color-scheme: light dark;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
background-color: rgba(27, 38, 54, 1);
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-text-size-adjust: 100%;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local(""),
|
|
url("./Inter-Medium.ttf") format("truetype");
|
|
}
|
|
|
|
h3 {
|
|
font-size: 3em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
a {
|
|
font-weight: 500;
|
|
color: #646cff;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
a:hover {
|
|
color: #535bf2;
|
|
}
|
|
|
|
button {
|
|
width: 60px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 3px;
|
|
border: none;
|
|
margin: 0 0 0 20px;
|
|
padding: 0 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.result {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
place-items: center;
|
|
place-content: center;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.2em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
#app {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo {
|
|
height: 6em;
|
|
padding: 1.5em;
|
|
will-change: filter;
|
|
}
|
|
|
|
.logo:hover {
|
|
filter: drop-shadow(0 0 2em #e80000aa);
|
|
}
|
|
|
|
.logo.react:hover {
|
|
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
}
|
|
|
|
.result {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin: 1.5rem auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 1rem;
|
|
align-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
color: #213547;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
a:hover {
|
|
color: #747bff;
|
|
}
|
|
|
|
button {
|
|
background-color: #f9f9f9;
|
|
}
|
|
}
|
|
|
|
|
|
.input-box .btn:hover {
|
|
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
|
|
color: #333333;
|
|
}
|
|
|
|
.input-box .input {
|
|
border: none;
|
|
border-radius: 3px;
|
|
outline: none;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 10px;
|
|
color: black;
|
|
background-color: rgba(240, 240, 240, 1);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.input-box .input:hover {
|
|
border: none;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.input-box .input:focus {
|
|
border: none;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}
|