mirror of
https://github.com/netbirdio/netbird.git
synced 2026-10-11 07:59:08 +02:00
Eduard GertandEdward
f5707c3485
* [client] Add RTL layout support to the desktop UI <html dir> follows the active language, Radix primitives get the matching dir, physical spacing/positioning uses logical utilities, and directional icons, animations, arrow-key navigation and tooltip sides flip in RTL. * [client] Address RTL review feedback Force LTR with isolation for monospace values, let truncated names take their direction from their content, and keep the profile name field in the UI direction. * [client] Keep translated monospace labels in their own direction The forced-LTR rule for monospace values now skips elements with an explicit dir, translated development labels use dir=auto, and monospace values rendered through TruncatedText opt into LTR. --------- Co-authored-by: Edward <43848523+thomashacker@users.noreply.github.com>
112 lines
3.0 KiB
CSS
112 lines
3.0 KiB
CSS
@font-face {
|
|
font-family: "Inter Variable";
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
src: url("./assets/fonts/inter-variable.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "JetBrains Mono Variable";
|
|
font-style: normal;
|
|
font-weight: 100 800;
|
|
src: url("./assets/fonts/jetbrains-mono-variable.ttf") format("truetype");
|
|
}
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* nb-gray channels (space-separated RGB) consumed by tailwind.config.ts.
|
|
:root is the inverted light ramp — high stops are surfaces (near-white),
|
|
low stops are text (near-black); .dark restores the original dark ramp.
|
|
Surfaces stay darker than content cards to preserve their separation. */
|
|
:root {
|
|
--nb-gray-DEFAULT: 243 243 243;
|
|
--nb-gray-50: 26 26 26;
|
|
--nb-gray-100: 33 33 33;
|
|
--nb-gray-200: 50 50 50;
|
|
--nb-gray-250: 58 58 58;
|
|
--nb-gray-300: 77 77 77;
|
|
--nb-gray-350: 92 92 92;
|
|
--nb-gray-400: 108 108 108;
|
|
--nb-gray-500: 135 135 135;
|
|
--nb-gray-600: 154 154 154;
|
|
--nb-gray-700: 209 209 209;
|
|
--nb-gray-800: 226 226 226;
|
|
--nb-gray-850: 234 234 234;
|
|
--nb-gray-900: 238 238 238;
|
|
--nb-gray-910: 240 240 240;
|
|
--nb-gray-920: 243 243 243;
|
|
--nb-gray-925: 245 245 245;
|
|
--nb-gray-930: 246 246 246;
|
|
--nb-gray-935: 248 248 248;
|
|
--nb-gray-940: 250 250 250;
|
|
--nb-gray-950: 252 252 252;
|
|
--nb-gray-960: 255 255 255;
|
|
|
|
--skeleton-base: 238 238 238;
|
|
--skeleton-highlight: 247 247 247;
|
|
}
|
|
|
|
.dark {
|
|
--nb-gray-DEFAULT: 24 26 29;
|
|
--nb-gray-50: 244 246 247;
|
|
--nb-gray-100: 228 231 233;
|
|
--nb-gray-200: 203 210 214;
|
|
--nb-gray-250: 183 192 198;
|
|
--nb-gray-300: 163 173 181;
|
|
--nb-gray-350: 143 156 168;
|
|
--nb-gray-400: 124 137 148;
|
|
--nb-gray-500: 97 110 121;
|
|
--nb-gray-600: 83 93 103;
|
|
--nb-gray-700: 71 78 87;
|
|
--nb-gray-800: 63 68 75;
|
|
--nb-gray-850: 54 59 64;
|
|
--nb-gray-900: 46 50 56;
|
|
--nb-gray-910: 43 47 51;
|
|
--nb-gray-920: 37 40 45;
|
|
--nb-gray-925: 30 33 35;
|
|
--nb-gray-930: 37 40 44;
|
|
--nb-gray-935: 31 33 36;
|
|
--nb-gray-940: 28 30 33;
|
|
--nb-gray-950: 24 26 29;
|
|
--nb-gray-960: 22 24 27;
|
|
|
|
--skeleton-base: 37 40 45;
|
|
--skeleton-highlight: 51 55 62;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
* Body bg is fully opaque on purpose. The main window uses
|
|
* MacBackdropTranslucent (main.go) and TitleBarHiddenInset, which on macOS
|
|
* lets the desktop wallpaper bleed through any non-opaque pixel. A 90%
|
|
* body alpha meant two machines with different wallpapers saw different
|
|
* effective backgrounds. Matching the per-theme Wails BackgroundColour
|
|
* (services.CurrentWindowBackgroundColour, nb-gray DEFAULT in both ramps)
|
|
* keeps things consistent regardless of the OS backdrop.
|
|
*/
|
|
body {
|
|
@apply bg-nb-gray font-sans text-nb-gray-200 antialiased;
|
|
}
|
|
|
|
[dir="rtl"] :is(.font-mono, code, kbd):not([dir]) {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.wails-draggable {
|
|
--wails-draggable: drag;
|
|
cursor: default;
|
|
}
|
|
|
|
.wails-no-draggable {
|
|
--wails-draggable: no-drag;
|
|
}
|